d3.js 使粗糙的svg路径更平滑

qhhrdooz  于 12个月前  发布在  其他
关注(0)|答案(1)|浏览(176)

我正在创建一个绘图应用程序来创建鼠标移动的svg路径。但问题是创建的路径没有得到平滑。代码请查看Github link
我想创建像this.一样的平滑路径,但我想在svg路径中实现这一点,而不是在画布上,这样我就可以单独添加,编辑,删除,调整大小和拖放它们。
所创建的路径就像

circle,
.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

个字符
我怎样才能使它们光滑而不是粗糙呢?

qacovj5a

qacovj5a1#

代码中的问题是,简化坐标后,在重绘路径时,使用旧数组而不是新的简化数组。

svg {
  background: #ddd;
  font: 10px sans-serif;
  cursor: crosshair;
}

.line {
  cursor: crosshair;
  fill: none;
  stroke: #000;
  stroke-width: 2px;
  stroke-linejoin: round;
}

#output {
  position: relative;
  top: -2em;
  left: 0.67em;
  font: 12px/1.4 monospace;
}

个字符

相关问题