将点数组添加到多边形

Question

我正在尝试通过以下代码使用 svg.js 添加到多边形数组，以编程方式创建具有函数的 SVG 多边形：

const draw = SVG().addTo('body').attr({
  viewBox: '0 0 100 100'
})

const {width,height} = draw.viewbox()

const polygon = draw.polygon([])


createPoint(0,0)
createPoint(100,0)
createPoint(100,100)

function createPoint(x,y){
  const point = new SVG.Point()
  point.x = x
  point.y = y
  polygon.array().push([point.x,point.y])
}

svg 中没有显示任何内容。有任何想法吗？提前致谢

Answer 1

您没有将新点推送到之前创建的数组。

您可以设置一个点变量来接收新创建的点

let points = [];
createPoint(0,0)
createPoint(100,0)
createPoint(100,100)

const draw = SVG().addTo('body').attr({
  viewBox: '0 0 100 100'
})
const draw2 = SVG().addTo('body').attr({
  viewBox: '0 0 100 100'
})

let points = [];
createPoint(0,0)
createPoint(100,0)
createPoint(100,100)

let points2 = [];
addPoint(0,0);
addPoint(100,0);
addPoint(100,100);


const polygon = draw.polygon(points)
const polygon2 = draw2.polygon(points)

function createPoint(x,y){
  const point = new SVG.Point()
  point.x = x
  point.y = y
  points.push([point.x,point.y])
}

function addPoint(x,y){
  points2.push([x, y])
}

svg{
  display:inline-block;
  width:20%
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.1.2/svg.min.js"></script>

但我不确定您为什么需要创建新的 svgPoints。
简单的 x/y 坐标也可以解决问题。

Answer 2

我和 18 秒前发帖的@herrstrietzel 有同样的预感:-)。这是保留大部分初始 OP 代码的修复程序...

const draw = SVG().addTo('body').attr({
  viewBox: '0 0 100 100'
})

const {width,height} = draw.viewbox()

let pts = [];

function createPoint(x,y){
  const point = new SVG.Point()
  point.x = x
  point.y = y
  pts.push([point.x,point.y])
}

createPoint(5,5)
createPoint(25,25)
createPoint(35,10)

const polygon = draw.polygon(pts)

<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
<body/>

将点数组添加到多边形

Adding array of points to polygon

javascript

svg.js