在具有定义边界的HTML5画布中拖动图像 [英] Drag Image in HTML5 Canvas with defined Boundaries

问题描述

我正在使用HTML5 Canvas 2D，是否有任何函数可以帮助像下面的链接中提供的示例 -

I am working on HTML5 Canvas 2D, is there any function which can help to do like example given in below link -

http://www.html5canvastutorials.com/kineticjs/html5-canvas- drag-and-drop-bounds-tutorial-with-kineticjs /

推荐答案

如果你想要一个干净的教程如何使对象在HTML5画布内可拖动我写了一个教程，有很多解释这里。

If you want a clean tutorial on how to make objects draggable inside an HTML5 Canvas I've written a tutorial with a lot of explanation here.

对于你在画布上创建的每个对象，你可能也想给它一些限制边界，例如limitX，limitY，limitWidth，limitHeight等。然后，当你拖动，你需要确保它保持在这些边界内。如果它是超出范围，你只是强迫它在最近的一侧，试图被拖出。

For every object you create that is painted on the canvas you will probably want to also give it some kind of "limit bounds" such as limitX, limitY, limitWidth, limitHeight, etc. Then while you are dragging you need to make sure it remains within those bounds. If it is out of bounds you just force it to be on the closest side that it was attempted to be dragged out of.

这篇关于在具有定义边界的HTML5画布中拖动图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！