[英]How to select HTML5 canvas shapes?
我有一個HTML5畫布,上面已繪制了幾種形狀。
我想發生的是,當在任何形狀上單擊鼠標時,都應該選擇該形狀(至少它可以告訴您選擇了哪種形狀)。
謝謝。
嘗試使用現有的畫布庫(或創建自己的畫布庫),該庫在選擇形狀時會發生事件。
下面的示例使用Kinetic JS庫 ,下面的示例來自HTML5 Canvas Region Events示例 :
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;
}
Canvas沒有像DOM這樣的元素接口。 它僅用於繪圖。
您需要將資產創建為對象,並使用繪制循環對其進行繪制。 然后,您會忘記canvas
元素,使用對象,其偏移量等。
有一種非常簡單的方法來選擇像素精度的復雜形狀,而不涉及矩形的邊界或數學計算。
想法是將所有形狀復制到隱藏的輔助畫布上,在其中為每個形狀分配唯一的顏色。 在原始畫布上執行鼠標懸停或單擊事件時,將鼠標的(x,y)坐標相對於可見畫布保存,然后使用相同的坐標在隱藏的畫布上查找像素顏色。 因為每個形狀在隱藏的畫布上都有唯一的顏色,所以該顏色與用戶選擇的確切形狀相對應。
請注意,這僅支持大約1670萬種形狀,因為RGB僅具有24位顏色,但這應該綽綽有余。
這是一個使用D3和Canvas的簡單示例: http : //bl.ocks.org/syntagmatic/6645345
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.