javascript - Paper js 事件示例错误地测试了 mouseenter

Question

我正在使用the code来自 mouseenter 示例，但不是将 view.center 放置在 (50;50)

处

当光标位于圆圈上方时，圆圈应变为红色。但它只适用于它的左上部分。

在 Firefox、Windows 8 中测试

$(document).ready(() =>
{
    var canvas = document.getElementById("mainCanvas")
    paper.setup(canvas)
    console.log("creating circle")
    var path = new paper.Path.Circle({
        center: new paper.Point(50,50),
        radius: 25,
        fillColor: 'black'
    });
    console.log("created circle")
    // When the mouse enters the item, set its fill color to red:
    path.on('mouseenter', function () {
        this.fillColor = 'red';
    });
    // When the mouse leaves the item, set its fill color to black:
    path.on('mouseleave', function () {
        this.fillColor = 'black';
    });
})

canvas {
    border-style:double
}

<script src="https://code.jquery.com/jquery-2.1.3.js"> </script>
<script src = https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.10.3/paper-full.js></script>
<canvas id = "mainCanvas" resize></canvas>
<div>!!</div>

Answer 1

您是否使用 CSS 来正确调整 Canvas 大小？如果 HiDPI paper.js Canvas 中的像素未对齐，则 HitTest 将关闭:

https://stackoverflow.com/a/29103200/1163708