使用 Pixjs 修改多边形的顶点位置

Question

嗨，我是pixijs(pixi.js - v5.2.4(的新手(， 我在pixijs网站上看到了一些样本， 添加了一个简单的滑块，通过更改滑块值来更改多边形顶点的位置将获得更改我在Codepen中的代码。

var el = document.getElementById('slider');
if (el) {
el.addEventListener('input', changePolygon);
console.log("Great!!")
}
else{
console.log("It's null!!")
throw new ReferenceError("missingElement is not defined");
}

函数处理程序：

function changePolygon(e){
graphics.clear();
var target = (e.target) ? e.target : e.srcElement;
console.log(target.value)
// draw polygon  
// flat array of numbers that will be interpreted as [x,y, x,y, ...], 
let path = [300, 370,
500, 370,
500, 420, 
target.value, 420]; 
graphics.lineStyle(outline_thicknes, outline_color, 1);
graphics.beginFill(0x650A5A);
graphics.drawPolygon(path);
graphics.endFill();
}

但由于某种原因，多边形的轮廓看起来不太好， 有人可以看看并建议我如何解决此问题。

谢谢

Answer 1

显然我忘了用parseFloat包装target.valuetarget.value因为它是字符串类型。

现在效果很好！