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

Question

嗨，我是 pixijs 的新手（pixi.js - v5.2.4），我在pixijs网站上看到了一些samples，添加了一个简单的滑块，通过更改滑块值，多边形顶点的位置将发生变化 my code in 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.value 因为 target.value 是字符串类型。

现在效果很好！

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

Modifying polygon's vertex position with Pixjs

javascript

jquery

polygon

pixi.js