Question

我正在尝试将一个背景图片添加到我的HTML底部带有脚本标记的canvas元素。

此代码的输出是较大图像的小版本，如单个图块。在检查器中，画布已经处理完毕，因此无法使用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
});

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

2 个答案: