CODEWITHSUNDEEP
javascriptcanvasthree.jswebgl
Niels
Niels

Reputation: 49909

Canvas Image resize / scew / dnd

I'm trying to build a application where people can upload images and I want to make it possible that people can drag the corners of the image and distort it. But I have no clue where to start and I can't find any examples.

I do have an example in flash: http://configurator.cando.eu/popup.html
- Click "Cando Stijlkamer"
- Click on 1 of the 6 backgrounds
- On the top select step 2 "Kies uw deur"
- Double click the door, and on the bottom do it again.
- Now you can drag the corners.

Example image: Distort image

Anyone knows how to make this possible?

UPDATE
Started using ThreeJS for webGL, at the moment I got a cube, can make it perspective, scale and scew it. But the corner wont be flexible.

UPDATE 2
Created a custom geometry with draggable corners.

Upvotes: 7

Views: 1000

Answers (1)

Chris Panayotoff
Chris Panayotoff

Reputation: 1946

I can show you how you can do this effect very easy in Flash. However, if you need to use HTML5 I would suggest https://github.com/edankwan/PerspectiveTransform.js instead of Canvas element.

Upvotes: 2

Related Questions