【问题标题】：How to draw a polygon using EaselJS?如何使用 EaselJS 绘制多边形？
【发布时间】：2014-03-03 13:55:52
【问题描述】：

有Shape.graphic的方法可以轻松绘制圆形和矩形，但没有明显的方法绘制六边形和多边形等多边形？你如何使用 EaselJS 绘制它们？

【问题讨论】：

标签： javascript html canvas createjs easeljs

【解决方案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 方法。在我看来，它不会被广泛使用。

【讨论】：

我们可以用颜色填充这个 createjs.Shape 吗？

【解决方案2】：

我很惊讶缺少这个功能，所以我继续写它。

(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}, ...])

例如：

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/的工作小提琴

【讨论】：

【解决方案3】：

有一个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/

干杯。

【讨论】：

【解决方案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 旋转形状。}

【讨论】：