Question

ctx.beginPath();
ctx.moveTo((width - BarSpace * (i + 1)) - ((BarSpace - 10) / 2), (yMax - data.open) * Valuesteps);
ctx.lineTo((width - BarSpace * (i + 1)) - ((BarSpace - 10) / 2), (yMax - data.close) * Valuesteps);
ctx.lineTo((width - BarSpace * (i + 1)) + ((BarSpace - 10) / 2), (yMax - data.close) * Valuesteps);
ctx.lineTo((width - BarSpace * (i + 1)) + ((BarSpace - 10) / 2), (yMax - data.open) * Valuesteps);
ctx.lineTo((width - BarSpace * (i + 1)) - ((BarSpace - 10) / 2), (yMax - data.open) * Valuesteps);
ctx.fillStyle = "green";
ctx.fill();
ctx.stroke();

画布上的绘图是一个框，当我绘制的框在画布上悬停时，我只需要显示某种数据是否有可能的方法呢？如果我的鼠标悬停在那个盒子上，事件就会收听。

Answer 1

Canvas只是一个被动位图。任何被吸引到的东西都会与其他任何东西混合在一起，浏览器将无法区分一个图形与另一个图形。

为了实现这一点，你需要自己实现逻辑。

这样做的一种典型方法是将形状存储在您进行主要处理的阴影数组中，然后仅使用画布渲染数组中的内容。

例如，对于一个框，您只需使用自定义矩形对象：

function Rect(x, y, width, height, fColor, sColor) {

    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.fillStyle = fillColor || 'rgba(0, 0, 0, 0)';
    this.strokeStyle = strokeColor || '#000';

    this.render = function(ctx) {
         ctx.fillStyle = this.fillStyle;
         ctx.strokeStyle = this.strokeStyle;
         ctx.fillRect(this.x, this.y, this.width, this.height);
         ctx.strokeRect(this.x, this.y, this.width, this.height);
    }
}

现在你可以像这样创建你的盒子：

/// calc x, y, w, h based on the line coordinates you already have
var rect1 = new Rect(x, y, w, h, 'green', '#f00');

然后在需要更新时将其渲染到画布：

rect1.render(ctx);

处理鼠标悬停：

var isInside = false;

canvas.onmousemove = function(e) {

    /// correct mouse position
    var rect = canvas.getBoundinClientRect(),
        x = e.clientX - rect.left,
        y = e.clientY - rect.top;

    if (x >= rect1.x && x < rect1.x + rect1.width &&
        y >= rect1.y && y < rect1.y + rect1.height &&
        !isInside) {

        isInside = true; /// prevent unnecessary redraw of same state

        rect1.fillStyle = '#f90';
        rect1.render(ctx);

    } else if (isInside) {
         isInside = false; /// reset flag

        rect1.fillStyle = 'green';
        rect1.render(ctx);
    }
}

要触发某些操作，请使用相同的代码：

canvas.onclick = function(e) {

    /// correct mouse position
    var rect = canvas.getBoundinClientRect(),
        x = e.clientX - rect.left,
        y = e.clientY - rect.top;

    if (x >= rect1.x && x < rect1.x + rect1.width &&
        y >= rect1.y && y < rect1.y + rect1.height) {

        callFunctionHere();
    }
}

希望这会帮助你朝着正确的方向前进。

在悬停的绘图jquery画布上的事件

1 个答案: