Question

我正在开发一个用户来的应用程序，看到一个空白区域（div或画布或其他什么，我们以后称之为mycanvas）。现在他从外面（div）拖动一些图像并将它们放在mycanvas上。他也可以调整大小。并且，他还可以使用铅笔和带有擦除功能的颜色在mycanvas中绘制一些东西。现在，根据我的研究到现在为止，我已经发现绘图部分是一个纯HTML 5画布的东西。所以，没问题。但我不确定他是否可以将图像从外部div / canvas放到mycanvas。请告诉我如何在一个区域内实现所有三个功能（从外部拖放，用铅笔绘图，调整图像大小）。

Answer 1

我已经通过Html5Canvas创建了一个在线dnd编辑器。

我将首先创建一个循环

var loop = function(){
  // Operation Here
}

self.setInterval(loop, 1000/60);

创建数据模型，例如图像

var DndImage = function(x, y, width, height, image){
  this.type = "image";
  this.image = image;
  this.x = x;
  this.y = y;
  this.width = width;
  this.height = height;
}

然后我们在循环中绘制图像

var ObjectArray = new Array();
var WIDTH = 800;
var HEIGHT = 600;
var loop = function(){
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");
  context.clearRect(0, 0, WIDTH, HEIGHT);
  for(var x = 0; x < ObjectArray.length; x++){
    if(ObjectArray[x].type == "image")
      context.drawImage(ObjectArray[x].image,ObjectArray[x].x,ObjectArray[x].y, ObjectArray[x].width, ObjectArray[x].height);
  }
}

添加新图像对象的功能

function addImage(src, x, y, width, height){
  var img = new Image();
  img.src = src;
  img.onload = function(){
   ObjectArray.push(new DndImage(x, y, width, height, img)); 
  }
}

现在如果你想做一个dnd，你需要做的是设置一个Listener来监听鼠标移动事件。并设置DndImage对象x和y以跟随图像canavs中的鼠标位置。您也可以缩放图像或更改尺寸。

docuemnt.addEventListener("mousedown", function(){  });
docuemnt.addEventListener("mouseup", function(){  });
docuemnt.addEventListener("mousemove", function(){  });
docuemnt.addEventListener("click", function(){  });

希望我能帮到你：D

Answer 2

您可以使用kinetic js实现所有必需的功能。

拖放，调整大小

http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/

要使用不同的形状进行绘画，请说一句：

http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-line-tutorial/

从外部画布中删除是最简单的事情，可能是：

http://www.w3schools.com/html/html5_draganddrop.asp

请检查这些内容并告知我们集成是否存在任何问题。

拖放，调整图像大小，然后在1个画布中绘制要素

2 个答案: