0
我有我希望有人能夠幫助...HTML5/JavaScript的 - 多個畫布之間拖放不工作
在我的應用程序所需要的設施能問題的很好的例子到在多個畫布之間拖放圖像。
有拖放多個畫布avaliable在線之間下降的幾個預製的例子，我已經找到了我的需求RGraph的「理查德Heyes」禮貌的很好的例子，你可以看到here（注：您必須先點擊圖片，然後才能開始拖動它）。
正如你所看到的，在他的網站上這個拖放功能完美地工作，但是當我將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，所以我相信它一定是非常簡單的東西，我俯瞰，但我不能確定它是什麼。
您對此的幫助將非常感謝，非常感謝。
非常好，非常感謝你，你的例子完美工作。另外你如何去添加多個圖像到這些畫布？我已經制定了如何創建第三個和第四個畫布以在兩個畫面之間進行拖放，但無法創建超過一個圖像。非常感謝您的幫助 –
對上述有何想法？非常感謝 –
Sry，我不知道如何編輯代碼......但我認爲，您必須創建一個圖像數組，然後編輯並重復每個圖像的Draw（）函數，但我不知道，如何寫:)我的PHP5和JS技能不太好:( – pes502