Question

我正在尝试在不断向上滚动的画布上绘制一些内容。画布被创建为异物

this.svg = d3.select(this.root.nativeElement).append("svg")

let foreigner = this.svg.append("foreignObject")
  .attrs({
    x: 0,
    y: 0,
    width: `${this.width}`,
    height: `${this.height}`
  })

我在上面画了一些线：

let g = this.svg.append("g")
g.append("line").attrs({
  x1: 100,
  y1: 0,
  x2: 100,
  y2: this.height-1,
  stroke: "orange"
})

一切正常，直到它开始向上滚动。滚动是一个计时器，该计时器使用drawImage将图像向上绘制很多像素，然后在底部绘制一些新内容。为了进行测试，我将一些东西放在一起以生成随机的黑色块。

let step = 2

ctx.drawImage(ctx.canvas,
  0, step,
  this.width, this.height - step,
  0, 0,
  this.width, this.height - step)

let x = Math.floor(Math.random() * this.width)
ctx.fillStyle = "black"
ctx.fillRect(x - step, this.height - step, 5, step)

向上滚动部分起作用。但是发生的是，当它滚动足够多时，我的橙色线条消失了。它们仍在渲染的SVG中，并且在文件中（比z更高的位置）仍晚于画布，但不再可见。

它是怎么做到的？异物内部的画布不是真的与内置svg对象一样对待吗？

d3在画布上绘制svg元素

0 个答案: