缩放画布 Path2d （带有 svg 路径数据）而不缩放整个画布？

Question

我在单个画布中有多个 Path2D，我希望能够独立缩放和定位它们，而不是调整 context.scale() 和 context.translate()。我使用 SVG 路径数据构建每个 path2D 对象，因为我希望能够修改笔划破折号和笔划长度。

看来我可能无法使用 Path2D 来实现这一目标，解决这个问题的最佳方法是什么？

我正在考虑一些潜在的选择：

1. 将drawImage方法与svg源一起使用
2. 将 svg 路径数据转换为画布路径弧（可能使用库）
3. 调整实际的 svg 路径数据并为每次绘制重建 Path2D 对象

编辑：

我构建了这个代码笔，我试图将 p1 移向 p2 而不改变 p2 的位置。当我翻译上下文时，两个对象都会移动。仅调整 p1 位置的最佳方法是什么？

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var p1x = 0
var p1 = new Path2D("M1 0 h 100 v 50 h -100 Z");
var p2 = new Path2D("M200 0 h 50 v 25 h -50 Z");

setInterval(() => {
  p1x = p1x + 1
  ctx.translate(0, 0)
  ctx.clearRect(0, 0, 300, 300)
  ctx.translate(p1x, 0)
  ctx.fill(p1)
  ctx.fill(p2)    
}, 1000)

http://codepen.io/jasonpearson/pen/reXyVG

Answer 1

您可以将翻译仅应用于第一个元素：

setInterval(() => {
    p1x = p1x + 1;
    ctx.clearRect(0, 0, 300, 300);
    ctx.save();
    ctx.translate(p1x, 0);
    ctx.fill(p1);
    ctx.restore();
    ctx.fill(p2);
}, 1000);