如何實現HTML5 Canvas繪畫應用程序的拖放操作？

2

源代碼演示如果您使用的是拉斐爾的「原始」的lib必須由本人辦理撤銷/重做。圖形庫確實有撤銷/重做堆棧裏面，並支持導出爲SVG，PNG，JSON，...

另外，你有一些類似的連接器和端口Viso。

http://www.draw2d.org/graphiti/jsdoc/#!/example

問候

來源

2012-05-16 07:07:03

3

當用戶點擊畫布時，必須檢查座標（將其與對象的座標進行比較），並查看它是否在對象上。例如。您可以測試一個點（例如，用於鼠標按下連座標）是用這種方法的圓內：

function (pt) { 
    return Math.pow(pt.x - point.x,2) + Math.pow(pt.y - point.y,2) < 
                  Math.pow(radius,2); 
};

如果鼠標按下是在對象上，你必須改變對象的座標根據如何鼠標被移動。

下面是一個例子，在那裏你可以拖動一個圓圈：

<!DOCTYPE html> 
<html> 
<head> 
<script> 
window.onload = function() { 
    drawCircle(circle); 
    element = document.getElementById('canvas'); 
    element.addEventListener('mousedown', startDragging, false); 
    element.addEventListener('mousemove', drag, false); 
    element.addEventListener('mouseup', stopDragging, false); 
    element.addEventListener('mouseout', stopDragging, false); 
} 

function mouseX(e) { 
return e.clientX - element.offsetLeft; 
} 

function mouseY(e) { 
return e.clientY - element.offsetTop; 
} 

var Point = function (x, y) { 
    this.x = x; 
    this.y = y; 
    return this; 
} 

var Circle = function (point, radius) { 
    this.point = point; 
    this.radius = radius; 
    this.isInside = function (pt) { 
     return Math.pow(pt.x - point.x, 2) + Math.pow(pt.y - point.y, 2) < 
                  Math.pow(radius, 2); 
    }; 
    return this; 
} 

function startDragging(e) { 
    var p = new Point(e.offsetX, e.offsetY); 
    if(circle.isInside(p)) { 
     deltaCenter = new Point(p.x - circle.point.x, p.y - circle.point.y); 
    } 
} 

function drag(e) { 
    if(deltaCenter != null) { 
     circle.point.x = (mouseX(e) - deltaCenter.x); 
     circle.point.y = (mouseY(e) - deltaCenter.y); 
     drawCircle(circle); 
    } 
} 

function stopDragging(e) { 
    deltaCenter = null; 
} 

function drawCircle(circle) { 
    var canvas = document.getElementById('canvas'); 
    var ctx = canvas.getContext('2d'); 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    ctx.beginPath(); 
    ctx.arc(circle.point.x, circle.point.y, circle.radius, 0, Math.PI*2, true); 
    ctx.fill(); 
} 

var circle = new Circle(new Point(30, 40), 25); 
var deltaCenter = null; 
var element; 

</script> 
</head> 
<body> 
<canvas id="canvas" width="400" height="300"></canvas> 
</body> 
</html>

嘗試在jsFiddle

來源

2011-12-06 17:04:09 Jonas

+0

喬納斯嗨..感謝您的答覆，以及如何獲得形狀的座標？ – ramesh

+0

@rajeeesh：你需要自己保存它們。 – Jonas

+0

嗨，這是我用來添加圖像的功能...如何保存coordingtes？（工具。開始）{ tool.mousemove（ev）; var x = ev._x-28; var y = ev._y-28; var imageObj = new Image（）; imageObj.onload = function（）{ var p = context.drawImage（imageObj，x，y）; }; imageObj.src =「test.png」; tool.started = false; img_update（）; } }; – ramesh

1

我不認爲有一個簡單的方法來做到這一點。

如果您只是處理線條，我的方法是跟蹤所有創建的線條，包括起始座標，結束座標和某種z-索引。當用戶開始拖動動作（onmousedown）時，您必須檢查點是否靠近線條，然後更新對象並在移動鼠標時重繪畫布。

How can I tell if a point belongs to a certain line?

此，如果你有複雜的對象打交道，雖然得到了很多更復雜。您可能必須找到解決方案來檢查點是否在路徑中。

來源

2011-12-06 17:08:22 amiuhle

1

繪製到HTML5 Canvas中的對象被轉換爲像素，然後被遺忘。您無法調整它們的屬性並使畫布更新以查看效果。你可以自己記住它們，但是畫布仍然會設置這些像素，所以當你調整屬性時，你必須基本重繪整個畫布（或者至少是其中的一部分）。

您可能會考慮將SVG用於此應用程序，而將SVG元素記憶在DOM中，並且在更新其屬性時，瀏覽器將更新圖形以反映更改。

如果您必須使用畫布，那麼您將需要編寫相當多的代碼來處理鼠標命中，對象屬性和重繪。

來源

2011-12-06 17:18:27

+0

嗨詹姆斯感謝您的回覆，你有任何樣本或教程？我是否需要重新編碼我的應用程序，或者我可以根據我的要求升級它？謝謝 – ramesh

+1

關閉我的頭頂我不知道任何與這種東西的例子或教程的任何鏈接。有像Paper.js或KineticJS這樣的庫是圍繞畫布的矢量圖形包裝，可能是開始閱讀的好地方。我認爲你必須做任何方式的記錄，但如果你使用一個圖書館，可能不是那麼多。 SVG將是一個巨大的變化，編寫自己的矢量圖形代碼也會發生很大的變化。 –

+1

正如Srikanth指出的那樣，Raphael.js也是一個矢量圖形庫，儘管它使用SVG而不是畫布作爲後端。 –

3

同樣的效果可以使用Raphael.js（http://raphaeljs.com/）與Joint.jS（http://www.jointjs.com/）來實現。

使用Raphael創建的形狀可以像任何DOM元素一樣訪問，並且可以通過屬性進行操作。這是一個很棒的框架。

Joint.js有助於連接形狀。他們還有一個圖表庫，可以幫助創建ERD，Statemachine和幾個常見的圖表。最好的部分是你可以擴展他們的圖元素並創建你自己的自定義元素。它的下巴很酷。

結帳他們在http://www.jointjs.com/demos

來源

2011-12-06 22:42:29 Srikanth

如何實現HTML5 Canvas繪畫應用程序的拖放操作？

回答

相關問題