使用Paper.js调整栅格背景图像的大小

Question

我正在尝试在HTML底部的script标记中向画布元素添加背景图像。

此代码的输出是较大图像的较小版本，例如单个图块。 在检查器中，画布已被处理，因此无法使用css控制图像大小。

这是JavaScript：

    window.onload = function() {
        // plain image coming server side 
        var crag_image = $('#last-upload').attr('src');
        var canvas = document.getElementById('myCanvas');
        paper.setup(canvas);

        // Let's get layers working
        var img = document.createElement('img');
        img.src =  crag_image;
        img.id = "background-crag";
        var layer = new paper.Layer();
        var raster = new paper.Raster(img);

        // End Layers

        var secondLayer = new paper.Layer();
        secondLayer.activate();

        var myPath = new paper.Path();
        myPath.strokeColor = 'red';
        myPath.strokeWidth = 2.5;


        // Draw the view:
        paper.view.draw();

        var tool = new paper.Tool();

        tool.onMouseDown = function(event) {
            myPath.add(event.point);
        }

        tool.onMouseDrag = function(event) {
          myPath.add(event.point);
          // Update the content of the text item to show how many
          textItem.content = 'Segment count: ' + myPath.segments.length;
        }

        // When the mouse is released, simplify the path:
        function onMouseUp(event) {
          var segmentCount = path.segments.length;
          myPath.simplify(10);
          myPath.fullySelected = true;
          var newSegmentCount = myPath.segments.length;
          var difference = segmentCount - newSegmentCount;
          var percentage = 100 - Math.round(newSegmentCount / segmentCount * 100);
        }
   }

更新：

var raster = new paper.Raster(img); //works

如果我尝试根据引用扩展构造函数，则视图将失败。

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

Answer 1

你在这里做什么

img.src =  crag_image;

正在加载图像，然后再次将同一图像加载到栅格中。 栅格位于同一图像的顶部，因此您不了解其中的区别。

var raster = new paper.Raster({
  source: img.src, // loading the image again ?
  position: paper.view.center
});

相反，您要做的就是替换它

var img = document.createElement('img');
        img.src =  crag_image;
        img.id = "background-crag";
        var layer = new paper.Layer();
        var raster = new paper.Raster(img);

同

var raster = new paper.Raster({
  source: crag_image, //notice here
  position: paper.view.center
});

Answer 2

文档或我的代码中的名称范围已关闭，这可以解决此问题。

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