CODEWITHSUNDEEP
htmlimageimage-processingkineticjs
Tiago
Tiago

Reputation: 2966

KineticJS transform image to a trapezium

Is it possible to apply transformations to an image to transform it in a trapezium?

The image initial state is a rectangulum. The way my scene is build, I have a polygon that allows dragging on the edges, and an image with the same size and position.

I would like the image to have the same shape of the polygon aways, so it would became a trapezium when one polygon axis is dragged. Is this possible?

Upvotes: 0

Views: 531

Answers (1)

markE
markE

Reputation: 105015

I assume you're talking about something like an isosceles trapezoid rather than a simple rectangle.

The answer is No, but Yes...

No, not possible with 2D transforms--canvas.getContext("2d"). That's because 2d transforms use a 3x3 matrix that only makes parallel transforms. Since a trapezoid is non-parallel, you cannot possibly transform an image (rectangle) into a trapezoid.

But, Yes...you can use webGL (canvas 3D transforms) to do non-parallel transforms and therefore you can use canvas 3D to convert an image into a trapezoid.

Upvotes: 2

Related Questions