Question

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

我这样初始化画布（图像加载正常）：

function initCanvas() {

    // Init paper
    $canvas = document.getElementById('canvas');

    paper.install(window);
    paper.setup($canvas);

    loadImage('http://project.com/img/image1.jpg', 'init');

}

我这样加载图像：

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.clear();
            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;

        saveImage();

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

    };

}

当我更改图像时，我可能会像这样传递img网址：

 loadImage('http://project.com/img/image.jpg', 'load');

或通过文件读取器加载新图像，如下所示：

function loadFileReaderToCanvas() {

    // Read in file
    var fileElement = document.getElementById('photo');
    var file = fileElement.files[0];
    var filterType = /^(?:image\/jpg|image\/jpeg|image\/png)$/i;

    // Ensure it's an image
    if (!filterType.test(file.type)) {
        addFileError("Please only select images in JPG, JPEG or PNG-format");
        return;
    }

    // Load the image
    $reader = new FileReader();

    $reader.onload = function (readerEvent) {
        loadImage(readerEvent.target.result, 'load');
    };

    $reader.readAsDataURL(file);

}

第一个图像加载成功。

文件阅读器图像加载正常（URL为B64 src）并替换了画布上的图像。

但是，如果我清除文件输入，并想使用其地址src（http://project.com/img/default.jpg）加载默认图像，则该图像将不会加载，并且画布仍为空白。我错过了什么？谢谢

paper.js清除光栅图像并加载新图像

0 个答案: