拖放，調整圖像大小，然後在一個畫布中繪製要素

我正在處理用戶出現並看到空白區域（div或canvas或其他什麼，以後稱之爲mycanvas）的應用程序。現在他從外面拖動一些圖像（一個div）並將它們放在mycanvas上。他也可以調整它們。而且，他還可以使用鉛筆和顏色以及刪除功能在mycanvas中繪製某些東西。現在，根據我的研究到現在爲止，我已經發現繪圖部分是純HTML 5畫布的東西。所以，沒有問題。但我不確定他是否可以將圖像從外部div/canvas拖放到mycanvas。請告訴我如何在一個區域實現所有三個功能（從外部拖放，用鉛筆繪製，調整圖像大小）。拖放，調整圖像大小，然後在一個畫布中繪製要素

來源

2013-05-21 Manish Jain

可以實現利用動力學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-02 16:42:32

我有同樣的情況，你可以幫我，我發佈了一個問題以及http://stackoverflow.com/questions/26582375/drag-and-drop-images-into-canvas – StackUser

我已經創建了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-21 07:12:04

拖放，調整圖像大小，然後在一個畫布中繪製要素

回答

相關問題