Question:
How can I perform drag and drop of images and the zoom in and out of images using HTML5 Canvas element?
By Iyappan Ranganathan
Response:
There are many free Javascript libraries out there to accomplish many drag and drop and other image manipulation features. The one that I have used and satisfied with is KineticJS library. KineticJS exposes events and methods to manage multiple layers, shapes, images, grouping which in combination would help achieve your needs. Specifically the dragstart and dragend events will be the ones you would be interested to implement the drag and drop feature. For zoom in and out you should be using the setScale method.
Check out these links demonstrating the needed features:
HTML5 Canvas KineticJS Scale Animation Tutorial
How can I perform drag and drop of images and the zoom in and out of images using HTML5 Canvas element?
By Iyappan Ranganathan
Response:
There are many free Javascript libraries out there to accomplish many drag and drop and other image manipulation features. The one that I have used and satisfied with is KineticJS library. KineticJS exposes events and methods to manage multiple layers, shapes, images, grouping which in combination would help achieve your needs. Specifically the dragstart and dragend events will be the ones you would be interested to implement the drag and drop feature. For zoom in and out you should be using the setScale method.
Check out these links demonstrating the needed features:
HTML5 Canvas KineticJS Scale Animation Tutorial
HTML5 Canvas Drag and Drop an Image
As I said, there are many Javascript libraries and you may pick the one that best suits your needs.
No comments:
Post a Comment