Как программно нарисовать масштабируемый, эстетически приятный изогнутый хвост из комиксов? - PullRequest
Новая
       66

Как программно нарисовать масштабируемый, эстетически приятный изогнутый хвост из комиксов?

2 голосов
/ 13 августа 2010

Как специалист по пользовательскому интерфейсу, меня часто просят создавать всплывающие подсказки и другие всплывающие окна, отображающие текст. Один из стилей, который, кажется, больше всего интересует клиентов, - это текст в комиксе. Я хотел бы создать эти всплывающие подсказки программно (в отличие от встраивания или ссылки на визуализированную графику), потому что эти всплывающие подсказки должны будут изменять размер во время выполнения в зависимости от того, сколько текста они должны держать.

Воздушные шары легко рисовать по большей части: круги, прямоугольники или прямоугольники с закругленными углами. Самой сложной частью для меня является хвост (маленькая стреловидная часть комического шарика, которая указывает на динамик). Если вы гуглите комический шар, вы увидите, что есть много разновидностей хвостов. Они, которые клиенты запрашивают у меня, чаще всего изогнуты. Например ...

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 (который может быть процентом от всего всплывающего окна). Возможно регулируемая кривая. Количество.

Если это имеет значение, я использую Flash / Actionscript, но любая система, имеющая какой-то графический движок черепахи, должна работать примерно так же: я работаю с этой стандартной перевернутой декартовой сеткой (y увеличивается вниз), координаты x и y, возможность перемещать перо, рисовать линии и рисовать кривые.

Одно предупреждение: Flash позволяет мне рисовать только 3-точечные кривые Безье - начальную точку, контрольную точку, конечную точку.

Примечание: воздушные шары не нужно масштабировать после того, как они нарисованы.

1 Ответ

4 голосов
/ 14 августа 2010

Прежде всего, позвольте мне сказать вам, что я создал учетную запись, чтобы ответить на этот вопрос, потому что текущий проект, над которым я работаю, делает то же самое, что и вы.Для демонстрации вы можете проверить мою страницу приложения .

Вот как в принципе работает мой пузырьковый алгоритм:

1- Рисунок пузыря: Для круговогоили прямоугольный пузырь, используются методы ActionScript drawRoundRect и drawEllipse по умолчанию.Для крика (spikey) и мысленных пузырей я использовал 2 эллипса.Для пузыря крика внешний эллипс имеет начальную и конечную точки, тогда как внутренний эллипс имеет контрольные точки для кубической кривой Безье.Для пузыря мысли внешний эллипс имеет контрольные точки, а внутренний эллипс имеет начальную и конечную точки.Я нашел класс рисования кубического Безье из картограммы [точка] com / blog, если он еще не существует, я могу отправить вам класс, просто напишите мне сообщение.

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 решило проблему.

...