我正在开发一个应用程序,用户进来并看到一个空白区域(div 或 canvas 或其他任何东西,我们以后称之为 mycanvas)。现在他从外部(一个 div)拖动一些图像并将它们放在 mycanvas 上。他还可以调整它们的大小。而且,他还可以用铅笔和颜色在 mycanvas 上画一些东西,并带有擦除功能。现在,根据我迄今为止的研究,我发现绘图部分是纯 HTML 5 画布的东西。所以,这没问题。但我不确定他是否可以将图像从外部 div/canvas 拖放到 mycanvas。请告诉我如何在一个区域中实现所有三个功能(从外部拖放、用铅笔绘制、调整图像大小)。
问问题
1611 次
2 回答
2
我已经通过 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
于 2013-05-21T07:12:04.930 回答
1
您可以使用动力学 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
只需检查这些,让我知道集成是否有任何问题。
于 2013-06-02T16:42:32.710 回答