Question

我有一个要满足的要求如下。

我将一个图像添加到画布上，然后在画布中添加另一个图像，然后让用户键入他的名字，以便我们可以在第二个图像上添加该名字。然后，当用户单击“添加钻石” 按钮时，第三个图像就会添加到画布中（到目前为止效果很好）。

现在，我需要让用户将第三张图片从添加位置拖到画布内的某个位置。

因此，在添加拖动功能时，我需要使画布为空，这将删除两个已添加的图片。因此，我需要提供拖动功能而不影响已经添加的项目。

这是我的代码：

var canvas = document.getElementById('canvas');
// canvas.width = canvas.scrollWidth;

var ctx = canvas.getContext('2d');

var image = new Image();
//callback functionwhen image is loaded
image.onload = function() {


  ctx.drawImage(image, 10, 10, 198, 108);
}

image.src = 'https://lorempixel.com/150/150?1';
var Text = '';

function AddImageToCanvas() {
  var imageToAdd = new Image();

  imageToAdd.src = 'https://lorempixel.com/150/150';
  imageToAdd.onload = function() {
    ctx.drawImage(imageToAdd, 60, 100, 100, 60);
    ctx.font = "10px Arial";
    Text = 'sample text';
    // ctx.fillText(Text, 70, 110);
    ctx.save();
    ctx.translate(10, 30);
    ctx.rotate(-45);
    ctx.fillText(Text, -30, 150);
    ctx.restore();
    //var img = canvas.toDataURL("image/png");
    //document.write('<img src="' + img + '"/>');
  }
}

function AddDiamondImageToCanvas() {
  var DiamondImage = new Image();
  DiamondImage.src = 'https://lorempixel.com/30/30';
  DiamondImage.onload = function() {
    ctx.drawImage(DiamondImage, canvas.width - 15, canvas.height - 15, 15, 15);
  }
}

<canvas style=" height:490px;width:800px; border:1px solid;" id="canvas">Sorry your browser does't support canvas</canvas>
<input type="text" id="textToAdd" />
<a onclick="AddImageToCanvas()">Add image</a>
<a onclick="AddDiamondImageToCanvas()">Add Diamond</a>

对于菱形图像（摘要中的小片段），我需要添加拖动功能，因为如果用户将其从该位置拖动到“示例文本”或附近，则它已经添加到画布中，应该将其移动到该位置留下了他的点击。

将图像拖到画布内而不影响已添加的项目

0 个答案: