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

Question

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

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

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, но любая система с каким-то графическим движком черепахи должна работать практически так же: , координаты x и y, возможность перемещения пера, рисование линий и рисование кривых.

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

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

Answer 1

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

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

1 Bubble рисунок: Для круглого или прямоугольного пузыря, используются по умолчанию ActionScript drawRoundRect и drawEllipse методы. Для криков (spikey) и мыслей мы использовали 2 эллипса. Для наружного эллипса крика есть начальная и конечная точки, тогда как внутренний эллипс имеет контрольные точки для кубической кривой безье. Для внешнего эллипса пузырьков мысли есть контрольные точки, а внутренний эллипс имеет начальную и конечную точки. Я нашел класс рисования кубического безье из cartogrammar [dot] 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 решил проблему.