如何使用EaselJS繪制多邊形？

Question

有Shape.graphic方法可以輕松繪制圓形和矩形，但沒有明顯的方法可以繪制多邊形，如六邊形和多邊形？ 你如何使用EaselJS繪制它們？

Answer 1

實際上它非常簡單，只需要使用方法moveTo和lineTo 。 繪制簡單三角形的示例，

var polygon = new createjs.Shape();
polygon.graphics.beginStroke("black");
polygon.graphics.moveTo(0, 60).lineTo(60, 60).lineTo(30, 90).lineTo(0, 60);

並且想到它，不需要drawPolygon方法。 在我看來，它不會被廣泛使用。

Answer 2

有一個drawPolyStar方法，可用於繪制幾何形狀。 http://www.createjs.com/Docs/EaselJS/classes/Graphics.html#method_drawPolyStar

任何不規則的東西都可以使用之前@quik_silv提到的Shape lineTo和moveTo方法（記得在繪制之前先開始筆划或填充）。

第三方工具可以導出更復雜的形狀，例如Flash CC（使用Toolkit for CreateJS或新的Canvas文檔）。 Illustrator的DrawScript插件可以非常輕松地將Illustrator路徑導出到CreateJS，包括緊湊格式。 http://drawscri.pt/

干杯。

Answer 3

我很驚訝這個功能丟失了，所以我繼續寫下來。

(createjs.Graphics.Polygon = function(x, y, points) {
    this.x = x;
    this.y = y;
    this.points = points;
}).prototype.exec = function(ctx) {
    var start = this.points[0];
    ctx.moveTo(start.x, start.y);
    this.points.slice(1).forEach(function(point) {
        ctx.lineTo(point.x, point.y);
    });
    ctx.lineTo(start.x, start.y);
}
createjs.Graphics.prototype.drawPolygon = function(x, y, args) {
    var points = [];
    if (Array.isArray(args)) {
        args.forEach(function(point) {
            point = Array.isArray(point) ? {x:point[0], y:point[1]} : point;
            points.push(point);
        });
    } else {
        args = Array.prototype.slice.call(arguments).slice(2);
        var x = null;
        args.forEach(function(val) {
            if (x == null) {
                x = val;
            } else {
                points.push({x: x, y: val});
                x = null;
            }
        });
    }
    return this.append(new createjs.Graphics.Polygon(x, y, points));
}

這將向圖形對象添加一個drawPolygon()方法，該方法可以通過3種方式調用。

點作為單獨的參數drawPolygon(x, y, p1x, p1y, p2x, p2y, ...)

點作為數組的數組drawPolygon(x, y, [[p1x, p1y], [p2x, p2y], ...])

drawPolygon(x, y, [{x:p1x,y:p1y}, {x:p2x,y:p2y}, ...])對象數組drawPolygon(x, y, [{x:p1x,y:p1y}, {x:p2x,y:p2y}, ...])

例如：

poly1.graphics.beginFill("Red").drawPolygon(0,0,10,10,10,40,40,30,60,5,30,0);
poly2.graphics.beginFill("Green").drawPolygon(0,0,[[10, 10], [10, 40], [40, 30], [60, 5], [30,0]]);
poly3.graphics.beginFill("Blue").drawPolygon(0,0,[{x:10,y:10}, {x:10,y:40}, {x:40,y:30}, {x:60,y:0}]);

在https://jsfiddle.net/k3rgk11e/2/上看到一個工作小提琴

Answer 4

最簡單的方法是畫一個PolyStar

JS代碼：

x=60, y=60, size=20, sides=3, angle=0;

polygon = new createjs.Shape();
polygon.graphics.beginFill("black").drawPolyStar(x, y, size, sides, 0, angle);

myCanvas.addChild(polygon);

結果：

_{更改制作任何多邊形的sides的值。 您也可以使用angle旋轉形狀。}