如何使用 EaselJS 绘制多边形？

Posted 2023-03-05

【中文标题】如何使用 EaselJS 绘制多边形？

【英文标题】：How to draw a polygon using EaselJS?

【发布时间】：2014-03-03 13:55:52

【问题描述】：

有Shape.graphic的方法可以轻松绘制圆形和矩形，但没有明显的方法绘制六边形和多边形等多边形？你如何使用 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 旋转形状。}