Question

首次使用paper.js并尝试允许用户在光栅图像上徒手画一条线。图片加载正常，但没有任何Mouse事件触发。

我这样加载图像：

function loadImage($url, $type = 'load') {

    var $width, $height;

    var $image = new Image();
    $image.src = $url;

    $image.onload = function (imageEvent) {

        var $size = resizeImage($image);
        $width = $size.width;
        $height = $size.height;

        $($canvas).hide();

        if ($type == 'load') {
            paper.project.activeLayer.removeChildren();
            paper.view.draw();
        }

        $raster = new paper.Raster({
            source: $image.src,
            position: view.center,
        });

        if ($image.width > $image.height) {
            $raster.rotate(90);
            $width = $size.height;
            $height = $size.width;
        }

        paper.view.viewSize = new Size($width, $height);
        $raster.fitBounds(paper.view.bounds);

        $canvas.width = $width;
        $canvas.height = $height;

        $($canvas).fadeIn('slow');

    };

}

然后我有以下鼠标事件：

function onMouseDown(event) {
    console.log('onMouseDown');

    if ($path) {
        path.selected = false;
    }

    $path = new Path({
        segments: [event.point],
        strokeColor: '#ff0000',
        strokeWidth: 5,
    });
}

function onMouseDrag(event) {
    console.log('onMouseDrag');
    $path.add(event.point);
}

function onMouseUp(event) {
    console.log('onMouseUp');
    $path.fullySelected = true;
}

但是事件不会触发。我错过了什么？谢谢。

Answer 1

您必须将事件处理程序连接到当前的纸张视图。

LEN()

查看：http://paperjs.org/reference/view/

paper.js在栅格图像上创建行路径不起作用

1 个答案: