paper.js设置canvas背景图 绘图时背景被清除的解决方法

你当前的写法直接调用原生Canvas 2D上下文的drawImage绘制图片，没有接入Paper.js的渲染队列：Paper.js每次触发重绘（比如拖拽绘制路径、更新画布元素）时，会先清空整个画布，再重新渲染所有它管理的元素，你手动绘制的背景图不在渲染列表里，自然会被清空。同时你没有做图片尺寸和画布的适配逻辑，自然无法匹配浏览器窗口大小。

推荐使用Paper.js原生的Raster对象加载背景图，将其固定在所有绘制内容的最底层，同时绑定画布尺寸变化事件做适配，完全不会出现重绘被清除的问题，修改后的完整代码如下：

<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.15/paper-full.js"></script>
<canvas id="canvas" resize style="width:100vw;height:100vh;margin:0;"></canvas>
<script type="text/paperscript" canvas="canvas">
  // 初始化背景图层
  const bgLayer = new Layer();
  // 激活绘制路径的图层，放在背景层上方
  const drawLayer = new Layer();
  let bgRaster = null;

  // 加载背景图
  const bgImg = new Image();
  bgImg.onload = function() {
    bgLayer.activate();
    bgRaster = new Raster(bgImg);
    // 把背景图放到最底层
    bgRaster.sendToBack();
    // 初始化适配当前画布尺寸
    resizeBg();
  }
  // 替换为你的本地room.jpeg路径即可
  bgImg.src = 'room.jpeg';

  // 背景图适配画布尺寸的方法
  function resizeBg() {
    if (!bgRaster) return;
    // 缩放背景图匹配当前画布宽高
    bgRaster.scale(
      view.viewSize.width / bgRaster.width,
      view.viewSize.height / bgRaster.height
    );
    // 把背景图定位到画布对应位置
    bgRaster.position = view.center;
  }

  // 监听窗口/画布尺寸变化，自动适配背景
  view.onResize = function() {
    resizeBg();
  }

  // 以下为原有路径绘制逻辑，全部切换到drawLayer执行
  drawLayer.activate();
  let path;
  const currentPath = [];
  const textItem = new PointText({
    content: '',
    point: new Point(20, 30),
    fillColor: 'black',
  });

  function onMouseDown(event) {
    if (path) {
      path.selected = false;
    }
    path = new Path({
      segments: [event.point],
      strokeColor: 'black',
      fullySelected: false
    });
  }

  function onMouseDrag(event) {
    console.log('Capturing new path');
    path.add(event.point);
    const point = event.point;
    currentPath.push(point.x + ', ' + point.y);
    textItem.content = '';
  }

  function onMouseUp(event) {
    const segmentCount = path.segments.length;
    console.log('End');
    const poi = prompt("Please enter your poi start and end");
    console.log('Saving Paths' + poi + (currentPath.toString()));
    path.simplify(10);
    path.fullySelected = false;
    textItem.content = '';
  }
</script>

轻量可选方案 #

如果不需要对背景图做Canvas层面的交互/编辑，也可以直接用CSS给canvas设置背景图，性能更好，完全不会被Canvas重绘逻辑影响：

#canvas {
  background: url('room.jpeg') center/cover no-repeat;
  width: 100vw;
  height: 100vh;
  margin: 0;
}

这种写法不需要修改任何原有JS路径绘制逻辑，背景图会自动适配canvas尺寸，也不会出现绘制路径时被清除的问题。

内容的提问来源于stack exchange，提问作者Mohit H