HTML5 / Javascript - 在多个画布之间拖放不起作用的完美示例

HTML5/Javascript - Perfect example of Drag and Drop between multiple canvases not working

本文关键字：拖放 之间 不起作用 完美 Javascript 布之间 HTML5      更新时间：2023-09-26

我有一个问题，我希望有人能够提供帮助......

在我的应用程序上，我需要能够在多个画布之间拖放图像的功能。

有一些

在线可用的在多个画布之间拖放的预制示例，我找到了满足我需求的完美示例，由 RGraph 的"Richard Heyes"提供，您可以在此处看到（注意：您必须先单击图像才能开始拖动它）。

如您所见，在他的网站上，此拖放功能可以完美运行，但是当我将javascript，html和css传输到我的应用程序时，拖放图像的功能不起作用。

我在做什么：

<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<style type="text/css">
canvas {
    border: 1px solid #808080;
}
</style>
<canvas style="float: left" height="125" width="400" id="cvs1">[No canvas support]</canvas>
<canvas style="float: left; margin-left: 100px" height="125" width="400" id="cvs2">[No canvas support]</canvas>
<script>
    window.onload = function ()
    {
        var canvas1 = document.getElementById("cvs1");
        var canvas2 = document.getElementById("cvs2");
        var context1 = canvas1.getContext('2d');
        var context2 = canvas2.getContext('2d');
        var imageXY  = {x: 5, y: 5};


        /**
        * This draws the image to the canvas
        */
        function Draw ()
        {
            //Clear both canvas first
            canvas1.width = canvas1.width
            canvas2.width = canvas2.width
            //Draw a red rectangle around the image
            if (state && state.dragging) {
                state.canvas.getContext('2d').strokeStyle = 'red';
                state.canvas.getContext('2d').strokeRect(imageXY.x - 2.5,
                                                         imageXY.y - 2.5,
                                                         state.image.width + 5,
                                                         state.image.height + 5);
            }
            // Now draw the image
            state.canvas.getContext('2d').drawImage(state.image, imageXY.x, imageXY.y);
        }


        canvas2.onclick =
        canvas1.onclick = function (e)
        {
            if (state && state.dragging) {
                state.dragging = false;
                Draw();
                return;
            }


            var mouseXY = RGraph.getMouseXY(e);
            state.canvas    = e.target;
            if (   mouseXY[0] > imageXY.x
                && mouseXY[0] < (imageXY.x + state.image.width)
                && mouseXY[1] > imageXY.y
                && mouseXY[1] < (imageXY.y + state.image.height)) {
                state.dragging       = true;
                state.originalMouseX = mouseXY[0];
                state.originalMouseY = mouseXY[1];
                state.offsetX         = mouseXY[0] - imageXY.x;
                state.offsetY         = mouseXY[1] - imageXY.y;
            }
        }
        canvas1.onmousemove =
        canvas2.onmousemove = function (e)
        {
            if (state.dragging) {
                state.canvas = e.target;
                var mouseXY = RGraph.getMouseXY(e);
                // Work how far the mouse has moved since the mousedon event was triggered
                var diffX = mouseXY[0] - state.originalMouseX;
                var diffY = mouseXY[1] - state.originalMouseY;
                imageXY.x = state.originalMouseX + diffX - state.offsetX;
                imageXY.y = state.originalMouseY + diffY - state.offsetY;
                Draw();
                e.stopPropagation();
            }
        }
        /**
        * Load the image on canvas1 initially and set the state up with some defaults
        */
        state = {}
        state.dragging     = false;
        state.canvas       = document.getElementById("cvs1");
        state.image        =  new Image();
        state.image.src    = 'http://www.rgraph.net/images/logo.png';
    state.offsetX      = 0;
        state.offsetY      = 0;
        state.image.onload = function ()
        {
            Draw();
        }
    }
</script>
</body>
</html>
<!-- CODE COURTESY OF RICHARD HEYES OF RGRAPH 
     http://www.rgraph.net/blog/2013/january/an-example-of-html5-canvas-drag-n-drop.html -->

我在这个JSFiddle上创建了同样的东西，但是拖放仍然不起作用。

我是html5和javascript的新手，所以我确信它一定是我忽略的非常简单的东西，但我无法弄清楚它是什么。

非常感谢您对此的帮助，非常感谢。

我已经在

标签<script>和</script>之间插入了您的JavaScript代码，并将其从JavaScript移动到HTML，并且我从示例页面添加了新的脚本链接：

<script src="http://www.rgraph.net/libraries/RGraph.common.core.js" ></script>

JSFiddle - 工作示例

所以我认为，您必须从此页面下载 RGraph 的核心文件并将其插入到您的代码中。

相关文章：