flash - 如何以编程方式绘制可缩放、美观、弯曲的漫画书气球尾部？

Question

作为 UI 专家，我经常被要求构建工具提示显示和其他类型的显示文本的弹出窗口。客户似乎 HitTest 衷的一种风格是漫画书气球中的文字。我想以编程方式创建此气球(而不是嵌入或链接到呈现的图形)，因为这些气球必须在运行时更改大小，具体取决于它们必须容纳的文本量。

气球的大部分很容易绘制:圆形、矩形或圆角矩形。对我来说，最困难的部分是尾部(漫画气球中指向扬声器的小箭头状部分)。如果你谷歌漫画气球，你会看到尾部有很多种。客户最常向我提出的要求是弯曲的。例如...

http://www.macybugs.com/round%20bubble.PNG

和

http://thumb10.shutterstock.com.edgesuite.net/display_pic_with_logo/121360/121360,1222432252,2/stock-vector-vector-cartoon-speech-balloon-add-your-own-text-easily-17961022.jpg

尾部总是在气球的底部，有时向左，有时向右。一段时间以来，我一直在尝试提出尾部绘制算法，但我对结果并不满意。我基本上是在黑暗中摸索，改变变量，查看结果，并通过反复试验来尝试接近可行的神奇数字。 “工作”只是指看起来令人愉悦的结果，我认为这是主观的。我的大多数客户都会对任何看起来相当不错和专业的东西感到满意。

我希望这个结果可以扩展。如果它可以使用尽可能少的输入，那就太好了，也许只是 isFacingLeft、tailWidth 和 tailHeight(可能是整个气球的百分比)。也许是一个可调整的 curveAmount。

如果重要的话，我正在使用 Flash/Actionscript，但是任何具有某种海龟图形引擎的系统都应该以几乎相同的方式工作:我正在使用标准的翻转笛卡尔网格(y 向下增加)， x 和 y 坐标，移动笔、画线和画曲线的能力。

一个警告:Flash 只允许我绘制 3 点贝塞尔曲线——起点、控制点、终点。

注意:气球在绘制后不必缩放。

Answer 1

首先让我告诉你，我创建了一个帐户来回答这个问题，因为我目前正在从事的项目做的事情与你定义的相同。对于演示，您可以查看我的 application页面。

下面是我的气泡算法的基本工作原理:

1- 绘制气泡:对于圆形或矩形气泡，使用默认的 ActionScript drawRoundRect 和 drawEllipse 方法。对于尖叫(尖刺)和思想泡泡，我使用了 2 个省略号。对于尖叫气泡，外椭圆有起点和终点，而内椭圆有三次贝塞尔曲线的控制点。对于思想泡泡，外椭圆有控制点，内椭圆有起点和终点。我从 cartogrammar [dot] com/blog 找到了 cubic bezier 绘图类(class)，如果它还没有，我可以把类(class)发给你，给我留言。

2- 尾部绘制:这是棘手的部分，为了创建光滑的漫画气泡尾部效果，我使用了等腰三角形，其相等的边也可以弯曲。三角形底边的中点也是气泡的中点。

当你点击并拖动气泡尾部的端点时，三角形的底边使用反正切函数面向鼠标指针坐标，然后三角形底边的端点被设置为预先计算的点。

反正切函数:

    //p1= center of circle
    //p2= target point
    //find angle between point 1, point 2 and y=0 line and returns degree value
    private function findAngle(p1:Point,p2:Point):Number{

        var rad:Number = 0;
        var angle:Number = 0;

        if(p2.x - p1.x == 0 || p1.x - p2.x == 0){
            angle = -90

        }else{
            rad = Math.atan((p2.y-p1.y)/(p2.x-p1.x));   
            angle = Math.floor((rad * (180/Math.PI)));

        }       

        return angle;
    }

下面是我如何计算三角形底边的潜在端点:

        //calculates circle points for drawing tail triangle
    private function calculateCircle():void{

        var steps:uint = 360;
        var rad:Number = CENTER_RADIUS;

        //delete array
        this.circleArray.splice(0);
        for(var i:int = 0; i < 360; i+= 360/steps){

            var alpha:Number = i * (Math.PI /180);
            var sinAlpha:Number = Math.sin(alpha);
            var cosAlpha:Number = Math.cos(alpha);

            var circX:Number = circleCenter.x + (rad * cosAlpha);
            var circY:Number = circleCenter.y + (rad * sinAlpha);

            var  p:Point = new Point(circX,circY);
            this.circleArray.push(p);

        }           
    }

我的最后一个问题是处理气泡图形的轮廓和内部。通常当你在气泡上方画尾部时，三角形的两侧(尾部)正好进入气泡的中心。如果你把气泡放在上面，那么气泡轮廓就会剪掉尾部。我是一个 Actionscript 新手，所以它并没有很快出现，但是按照 BubbleTailOutline、Bubble、BubbleTailInside 的顺序添加图形层解决了这个问题。