如何選擇HTML5畫布形狀？

Question

我有一個HTML5畫布，我畫了幾個形狀。

我想要發生的事情是，當鼠標點擊任何形狀時，形狀應該被選中（至少它可以告訴選擇哪種形狀）。

謝謝。

Answer 1

嘗試使用現有的畫布庫（或創建自己的），在選擇形狀時發生事件。

下面的示例使用Kinetic JS library，並且下面的例子是從HTML5 Canvas Region Events Example：

var triangle = new Kinetic.Shape(function(){ 
    var context = this.getContext(); 
    context.beginPath(); 
    context.lineWidth = 4; 
    context.strokeStyle = "black"; 
    context.fillStyle = "#00D2FF"; 
    context.moveTo(120, 50); 
    context.lineTo(250, 80); 
    context.lineTo(150, 170); 
    context.closePath(); 
    context.fill(); 
    context.stroke(); 
}); 

triangle.on("mouseout", function(){ 
    writeMessage(messageLayer, "Mouseout triangle"); 
}); 

triangle.on("mousemove", function(){ 
    var mousePos = stage.getMousePosition(); 
    var x = mousePos.x - 120; 
    var y = mousePos.y - 50; 
    writeMessage(messageLayer, "x: " + x + ", y: " + y); 
}); 

shapesLayer.add(triangle); 

var circle = new Kinetic.Shape(function(){ 
    var canvas = this.getCanvas(); 
    var context = this.getContext(); 
    context.beginPath(); 
    context.arc(380, canvas.height/2, 70, 0, Math.PI * 2, true); 
    context.fillStyle = "red"; 
    context.fill(); 
    context.lineWidth = 4; 
    context.stroke(); 
}); 

circle.on("mouseover", function(){ 
    writeMessage(messageLayer, "Mouseover circle"); 
}); 
circle.on("mouseout", function(){ 
    writeMessage(messageLayer, "Mouseout circle"); 
}); 
circle.on("mousedown", function(){ 
    writeMessage(messageLayer, "Mousedown circle"); 
}); 
circle.on("mouseup", function(){ 
    writeMessage(messageLayer, "Mouseup circle"); 
}); 

shapesLayer.add(circle); 

stage.add(shapesLayer); 
stage.add(messageLayer); 

此外，我已經包括一些小鼠中檢測如果光標在形狀內，不使用任何JavaScript庫。

矩形基於鼠標在檢測：

function isCursorWithinRectangle(x, y, width, height, mouseX, mouseY) { 
    if(mouseX > x && mouseX < x + width && mouseY > y && mouseY < y + height) { 
     return true; 
    } 
    return false; 
} 

圈爲基礎的鼠標在檢測：

function isCursorWithinCircle(x, y, r, mouseX, mouseY) { 
    var distSqr = Math.pow(x - mouseX, 2) + Math.pow(y - mouseY, 2); 

    if(distSqr < r * r) { 
     return true; 
    } 
    return false; 
} 

Answer 2

畫布不具有用於該元件的界面它就像DOM上的一樣。它僅用於繪圖。

您需要將資產創建爲對象並使用繪圖循環來繪製它們。然後您忘記了canvas元素，您可以使用它們的對象以及它們的偏移量等。

Answer 3

有一種非常簡單的方法可以選擇不包含邊界矩形或數學計算的像素精度的複雜形狀。

想法是，您將所有形狀複製到隱藏的輔助畫布上，在其中爲每個形狀分配唯一的顏色。在原始畫布上執行鼠標懸停或單擊事件時，將鼠標的（x，y）座標與可見畫布相關聯，然後使用相同的座標查找隱藏畫布上的像素顏色。由於每個形狀在隱藏畫布上都有獨特的顏色，因此該顏色對應於用戶選擇的確切形狀。

請注意，這隻支持大約1670萬個形狀，因爲RGB只有24位顏色，但這應該是綽綽有餘。

下面是使用D3和Canvas一個簡單的例子：http://bl.ocks.org/syntagmatic/6645345