填充移动圆锥形状不起作用，

Question

我正在使用 Flash API 绘制一个移动的锥形，该锥形稍后将用作激光束。但是，即使形状没有间隙，我也无法填充它。

这是我得到的当前结果，我按照数字所示的以下顺序绘制。

Link to current result

在这一切之前，我开始一个 beginFill(...) 并结束它，在绘制完所有线条之后，使用一个 endFill()。

如前所述，圆锥体移动后将用作效果（在每个点之间，我将淡化线条样式）。所以我要做的是存储每个 OnEnterFrame 事件的点并根据这些点绘制线（1 和 2）。激光束是有方向的。

如果它保持静态并且我按照以下方式绘制它（在 OnEnterFrame 事件中）：

                    graphics.clear();
        graphics.lineStyle(3, 0xFF0000);
        graphics.beginFill(0xFFFFFF);

        var dx:Number = end.x - source.x;
        var dy:Number = end.y - source.y;

        var angle:Number = Math.atan2(dy, dx);

        var endX1:Number = end.x + 20 * Math.cos(angle - 90);
        var endY1:Number = end.y + 20 * Math.sin(angle - 90);
        var endX2:Number = end.x + 20 * Math.cos(angle + 90);
        var endY2:Number = end.y + 20 * Math.sin(angle + 90);


        graphics.lineStyle(3, 0xFFFFFF);
        graphics.moveTo(source.x, source.y);
        graphics.lineTo(endX1, endY1);

        graphics.moveTo(source.x, source.y);
        graphics.lineTo(endX2, endY2);
        graphics.lineTo(endX1, endY1);
        graphics.endFill();

话虽如此，我不画第 4 行（如图所示）。

我的想法已经不多了，形状显然是封闭的，但填充不起作用。这是“移动”锥形效果的 OnEnterFrame 事件的完整代码。这里

public function update():void
    {
        /*
        graphics.clear();
        //graphics.lineStyle(3, 0xFF0000);
        graphics.beginFill(0xFFFFFF);
        //graphics.moveTo(source.x, source.y);
        //graphics.lineTo(end.x, end.y);
        */
        var dx:Number = end.x - source.x;
        var dy:Number = end.y - source.y;

        var angle:Number = Math.atan2(dy, dx);

        var endX1:Number = end.x + 20 * Math.cos(angle - 90);
        var endY1:Number = end.y + 20 * Math.sin(angle - 90);
        var endX2:Number = end.x + 20 * Math.cos(angle + 90);
        var endY2:Number = end.y + 20 * Math.sin(angle + 90);

        /*
        graphics.lineStyle(3, 0xFFFFFF);
        graphics.moveTo(source.x, source.y);
        graphics.lineTo(endX1, endY1);

        graphics.moveTo(source.x, source.y);
        graphics.lineTo(endX2, endY2);
        graphics.lineTo(endX1, endY1);
        graphics.endFill();

        return;
        */

        var x:Number  = currentPoint.x;
        var y:Number  = currentPoint.y;
        var x2:Number = currentPoint2.x;
        var y2:Number = currentPoint2.y;

        points[0].x = x;
        points[0].y = y;

        points2[0].x = x2;
        points2[0].y = y2;


        //::  Interpolate Current Point
        currentPoint    = Point.interpolate(new Point(endX1, endY1), source, progress);
        currentPoint2   = Point.interpolate(new Point(endX2, endY2), source, progress);


        //::  Add new point with properties
        if (progress < 1.0 )
        {
             points.splice(1, 0, {x: x, y: y, life: getTimer(), thickness: 2 + (20 * progress)});
             points2.splice(1, 0, {x: x2, y: y2, life: getTimer(), thickness: 2 + (20 * progress)});
        }

        //::  Line 1
        graphics.clear();
        graphics.lineStyle(3, 0xFFFFFF, 1);
        graphics.beginFill(0xFF0000);

        graphics.moveTo(x, y);

        for (var i:int = 1; i < points.length; i++) 
        {
            //::  Point dead, remove it
            if (getTimer() - points[i].life > lifetime)
            {
                points.splice(i--, 1);
            }
            //::  Update point life and draw graphics
            else 
            {
                var currentLife:Number  = (getTimer() - points[i].life);
                var perc:Number         = Math.abs(1 - (currentLife / lifetime));

                //graphics.lineStyle(3, 0xFFFFFF, perc);

                //::  Prev point
                var px:Number = points[i - 1].x;
                var py:Number = points[i - 1].y;

                graphics.lineTo(px, py);                                    
            }
        }


        //::  Line 2
        graphics.beginFill(0xFFFFFF);
        graphics.moveTo(x2, y2);

        for (var i:int = 1; i < points2.length; i++) 
        {
            //::  Point dead, remove it
            if (getTimer() - points2[i].life > lifetime)
            {
                points2.splice(i--, 1);
            }
            //::  Update point life and draw graphics
            else 
            {
                var currentLife:Number  = (getTimer() - points2[i].life);
                var perc:Number         = Math.abs(1 - (currentLife / lifetime));

                //graphics.lineStyle(3, 0xFFFFFF, perc);

                //::  Prev point
                var px:Number = points2[i - 1].x;
                var py:Number = points2[i - 1].y;

                graphics.lineTo(px, py);                                    
            }
        }



        //::  Close 3 & 4
        if (points.length > 1)
        {
            graphics.moveTo(points[points.length-2].x, points[points.length-2].y);
            graphics.lineTo(points2[points2.length-2].x, points2[points2.length-2].y);
        }

        graphics.moveTo(x, y);
        graphics.lineTo(x2, y2);
        graphics.endFill();



        //::  Progress
        progress += progressSpeed;      
        if (progress >= 1.0)    progress = 1.0;

代码是非常安全的解释。如果您需要更多信息，我会提供！

提前致谢！

Answer 1

我相信你的问题是因为你移动了两次绘图位置，这让 Flash 对应该填充的内容感到困惑。

通常，当我绘制这样的形状时，我只在开始时调用moveTo() 1 次，然后从当前端点开始绘制每一行。当您绘制每条线时，“当前终点”会发生变化。我建议你修改代码，让它像这样绘制：

moveTo(startX, startY);
lineTo(endX1, endY1);
lineTo(endX2, endY2);
lineTo(endX3, endY3);
lineTo(startX, startY);

我相信正在发生的事情是，当您第二次调用 moveTo() 时，Flash 会尝试填充之前绘制的任何内容。但是因为你只画了两条线，所以没有什么可以填充的。它重置它的状态（关于应该填充什么），然后你再画一两条线。当您调用endFill() 时，它只会查看自上次moveTo() 以来绘制的内容，并再次确定没有要填充的内容。