如何选择HTML5画布形状？

问题描述

我有一个HTML5画布，我已经绘制了几个形状。

I have a HTML5 canvas on which I have drawn several shapes.

我想要发生的是，当鼠标点击任何形状时，形状应该被选中（至少它可以知道选择什么样的形状）。

What I want to happen, is that when the mouse is clicked on any shape the shape should get selected (at least it can tell what kind of shape is selected).

谢谢。

推荐答案

尝试使用现有的画布库或创建自己的）在选择形状时具有事件。

Try using an existing canvas library (or create your own) that has an event when a shape is being selected.

下面的示例使用，下面的示例来自：

The example below uses the Kinetic JS library, and the example below is from 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库。

In addition, I have included some mouse-in detection if the cursor is within the shape, without using any javascript libraries.

基于矩形的鼠标检测：

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

基于圆的鼠标检测： / p>

Circle-based mouse-in detection:

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;
}

这篇关于如何选择HTML5画布形状？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！