设置背景图像并在其上工作

Question

我使用以下HTML使用Paper.js绘制路径。在背景上，我们想设置一个背景图像。

我试图设置本地存储的图像“ room.jpeg”。它可以正确加载，但不在后台。结果，当我尝试绘制路径时，它将被删除。图像应适合浏览器窗口。

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.14/fabric.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.15/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
  var c = document.getElementById("canvas");
  var ctx = c.getContext("2d");
  var img1 = new Image();

  //drawing of the test image - img1
  img1.onload = function() {
    //draw background image
    ctx.drawImage(img1, 0, 0);
    //draw a box over the top
    ctx.fillStyle = "rgba(200, 0, 0, 0.5)";
    ctx.fillRect(0, 0, 500, 500);
  };

  img1.src = 'https://i.imgur.com/6gU9m8O.png'; // 'room.jpeg'; amended for this demo

var path;
  var currentPath = [];

  var textItem = new PointText({
    content: '',
    point: new Point(20, 30),
    fillColor: 'black',
  });

  function onMouseDown(event) {
    // If we produced a path before, deselect it:
    if (path) {
      path.selected = false;
    }

    // Create a new path and set its stroke color to black:
    path = new Path({
      segments: [event.point],
      strokeColor: 'black',
      // Select the path, so we can see its segment points:
      fullySelected: false
    });
  }

  // While the user drags the mouse, points are added to the path
  // at the position of the mouse:
  function onMouseDrag(event) {
    console.log('Capturing new path');
    path.add(event.point);
    var point = event.point;
    currentPath.push(point.x + ', ' + point.y);
    // Update the content of the text item to show how many
    // segments it has:
    textItem.content = '';
  }

  // When the mouse is released, we simplify the path:
  function onMouseUp(event) {
    var segmentCount = path.segments.length;
    // console.log(currentPath.toString());
    console.log('End');
    var poi = prompt("Please enter your poi start and end");
    console.log('Saving Paths' + poi + (currentPath.toString()));
    // When the mouse is released, simplify it:
    path.simplify(10);

    // Select the path, so we can see its segments:
    path.fullySelected = false;

    var newSegmentCount = path.segments.length;
    var difference = segmentCount - newSegmentCount;
    var percentage = 100 - Math.round(newSegmentCount / segmentCount * 100);
    textItem.content = '';
  }
</script>
<canvas id="canvas" resize></canvas>

Answer 1

使用img作为背景会给您带来更多麻烦，因为您需要在每次运行中重新绘制/移动它。

我只使用一些 css 设置<代码>背景图像 to ＆lt; canvas＆gt;本身：

canvas {
  width: 100vw;
  height: 100vh;
  background-image: url('https://via.placeholder.com/500/FFFFF3?text=BG');
}

canvas {
  width: 100vw;
  height: 100vh;
  background-image: url('https://via.placeholder.com/500/FFFFF3?text=BG');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.15/paper-full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.15/paper-core.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.14/fabric.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
          
<canvas id="canvas" resize></canvas>

<script type="text/paperscript" canvas="canvas">
          
    var c = document.getElementById("canvas");
    var ctx = c.getContext("2d");

    var path;
    var currentPath = [];

    var textItem = new PointText({
        content: '',
        point: new Point(20, 30),
        fillColor: 'black',
    });

    function onMouseDown(event) {
        // If we produced a path before, deselect it:
        if (path) {
            path.selected = false;
        }

        // Create a new path and set its stroke color to black:
        path = new Path({
            segments: [event.point],
            strokeColor: 'black',
            // Select the path, so we can see its segment points:
            fullySelected: false
        });
    }

    // While the user drags the mouse, points are added to the path
    // at the position of the mouse:
    function onMouseDrag(event) {
        //console.log('Capturing new path');
        path.add(event.point);
        var point = event.point;
        currentPath.push(point.x + ', ' + point.y);
        // Update the content of the text item to show how many
        // segments it has:
        textItem.content = '';
    }

    // When the mouse is released, we simplify the path:
    function onMouseUp(event) {
        var segmentCount = path.segments.length;
        // console.log(currentPath.toString());
        // console.log('End');
        var poi = prompt("Please enter your poi start and end");
        console.log('Saving Paths' + poi + (currentPath.toString()));
        // When the mouse is released, simplify it:
        path.simplify(10);

        // Select the path, so we can see its segments:
        path.fullySelected = false;

        var newSegmentCount = path.segments.length;
        var difference = segmentCount - newSegmentCount;
        var percentage = 100 - Math.round(newSegmentCount / segmentCount * 100);
        textItem.content = '';
    }
</script>