javascript - 在不缩放整个 Canvas 的情况下缩放 Canvas Path2d(带有 svg 路径数据)？

Question

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

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

我正在考虑一些可能的选择:

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

编辑:

我构建了这个代码笔，我试图在不改变 p2 位置的情况下将 p1 移向 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

可以使用 addPath方法结合第二个转换参数来缩放路径...

const m = document.createElementNS("http://www.w3.org/2000/svg", "svg").createSVGMatrix()
const p = new Path2D()
const t = m.scale(0.5)
p.addPath(p1, t)

---

示例实现:

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")
var m = document.createElementNS("http://www.w3.org/2000/svg", "svg").createSVGMatrix()

setInterval(() => {
  p1x = p1x + 1

  const p = new Path2D()
  const t = m.translate(p1x, 0)
  p.addPath(p1, t)

  ctx.clearRect(0, 0, 300, 300)
  ctx.fill(p)
  ctx.fill(p2)
}, 1000)

canvas {
  border: 1px solid blue;
  height: 300px;
  width: 300px;
}

<canvas id="canvas"></canvas>

更好的实现:

var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
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")
var m1 = document.createElementNS("http://www.w3.org/2000/svg", "svg").createSVGMatrix()

setInterval(() => {
  let p = new Path2D()
  m1 = m1.translate(1, 0)
  p.addPath(p1, m1)

  ctx.clearRect(0, 0, 300, 300)
  ctx.fill(p)
  ctx.fill(p2)
}, 1000)

canvas {
  border: 1px solid blue;
  height: 300px;
  width: 300px;
}

<canvas id="canvas"></canvas>

---

只是一个小的辅助函数以备将来使用:

function transformPath2D(path, matrix) {
  const p = new Path2D()
  p.addPath(path, matrix)
  return p
}