コードを手動で編集するのではなく、ボタンをクリックするだけでキャンバスに新しい画像を生成できるようにしたいと考えています。
複数のキャンバス間で画像をドラッグ アンド ドロップできるようにする次の HTML5/JavaScript コードがあり、必要なものに完全に対応しています。
私がやっていること：
<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 src="http://www.rgraph.net/libraries/RGraph.common.core.js" ></script>
<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>
これは、このJS Fiddleでも見られます (注: ドラッグする前に画像をクリックする必要があります)。
私が抱えている問題：
キャンバスに画像を追加して、作成することを選択した多くのキャンバス間で任意の画像をドラッグ アンド ドロップできるようにしたいと考えています。
ページにキャンバスを簡単に追加してドラッグ アンド ドロップすることはできますが、キャンバスに画像を追加/生成する場合は、それを機能させることができません。
これを行うことができると考える唯一の方法は、Draw()追加されるすべての画像に対して関数を繰り返すことです。つまり、たとえば、30 個の画像を 10 個の異なるキャンバス間でドラッグ アンド ドロップできるようにするには、Draw()関数を 30 回繰り返す必要があります。確かにそれはこれを行うための最良の方法ではないでしょうか?
非常に明白な何かが欠けていない限り、これを行う別の方法がわかりませんか?
