Question

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

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

在所有这一切之前，我开始一个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()，然后从当前终点绘制每一行。绘制每一行时，“当前终点”会发生变化。我建议你修改代码，这样绘图就像这样：

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

我相信正在发生的事情是，当您第二次拨打moveTo()时，Flash会尝试填充以前绘制的内容。但是既然你只绘制了两条线，那就没什么好算的了。它会重置它的状态（关于应该填充的内容），然后你绘制另一条或两条线。当您致电endFill()时，它只会查看自上次moveTo()以来所绘制的内容，并再次确定无法填充任何内容。

填充移动的锥形不起作用，

1 个答案: