论文 js 事件示例错误地测试了 mouseenter

Question

我正在使用 mouseenter 示例中的 the code，但将圆圈放置在 (50;50)

而不是 view.center

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

在 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

从 canvas 中删除 resize 修复了它。仍然感兴趣，如果 paper.js 可以使用调整大小 canvas

Answer 2

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

论文 js 事件示例错误地测试了 mouseenter

Paper js event example incorrectly tests for mouseenter

javascript

events

paperjs