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

【问题标题】：Modifying polygon's vertex position with Pixjs使用 Pixjs 修改多边形的顶点位置
【发布时间】：2020-09-22 08:12:40
【问题描述】：

您好，我是 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();

}

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

谢谢

【问题讨论】：

标签： javascript jquery polygon pixi.js

【解决方案1】：

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

现在效果很好！

【讨论】：