VBox только с одним закругленным углом и градиентным фоном - PullRequest
Новая
       10

VBox только с одним закругленным углом и градиентным фоном

2 голосов
/ 05 октября 2009

Я работаю с Flex 3.4 SDK.

Я пытаюсь программно (да, должно быть, так) стилизовать / обработать VBox так, чтобы его верхний правый угол был закруглен, и он получил двухцветный градиентный квадрат.

Изменяя примеры, которые я нашел, я смог выполнить оба эффекта (угол и фон), но только по отдельности:

VBox с не всеми закругленными углами: http://livedocs.adobe.com/flex/3/html/help.html?content=skinning_6.html

VBox с градиентным фоном: http://butterfliesandbugs.wordpress.com/2007/06/08/generic-background-gradient-for-containers/

Но что мне нужно сделать, так это применить их одновременно. И все мои попытки кодирования до сих пор молча провалились.

Кто-нибудь знает, как сделать это правильно?

Ответы [ 2 ]

5 голосов
/ 05 октября 2009

У меня есть запись в моем блоге о том, как сделать именно этот компонент Здесь .

Вы создаете базовый пользовательский компонент MXML (в данном случае расширение VBox). Вы указываете программный скин, к которому применяются скос и градиент.

Программный скин делает все, что рисует, в функции updateDisplayList.

Вот часть кода (остальное на моем блоге, с демонстрацией) 

   var g:Graphics = graphics;
   var cn:Number = this.getStyle("cornerRadius");
   var crtl:Number = this.getStyle("cornerRadiusTopLeft") > 0 ? this.getStyle("cornerRadiusTopLeft") : cn;
   var crtr:Number = this.getStyle("cornerRadiusTopRight") > 0 ? this.getStyle("cornerRadiusTopRight") : cn;
   var crbl:Number = this.getStyle("cornerRadiusBottomLeft") > 0 ? this.getStyle("cornerRadiusBottomLeft") : cn;
   var crbr:Number = this.getStyle("cornerRadiusBottomRight") > 0 ? this.getStyle("cornerRadiusBottomRight") : cn;
   var gradFrom:Number = this.getStyle("gradientFrom");
   var gradTo:Number = this.getStyle("gradientTo");

   var b:EdgeMetrics = borderMetrics;
   var w:Number = unscaledWidth - b.left - b.right;
   var h:Number = unscaledHeight - b.top - b.bottom;
   var m:Matrix = verticalGradientMatrix(0, 0, w, h);

   g.clear();
   g.beginGradientFill("linear", [gradFrom, gradTo], [1, 1], [0, 255], m);
   g.lineStyle(1,borderColor,1,true,LineScaleMode.NORMAL,CapsStyle.ROUND,JointStyle.ROUND);
   GraphicsUtil.drawRoundRectComplex(g, b.left, b.top, w, h, crtl, crtr, crbl, crbr);
   g.endFill();
  }

для демонстрации, посмотрите Здесь . Надеюсь, это поможет.

2 голосов
/ 05 октября 2009

Следуйте инструкциям, указанным во второй ссылке, но вместо «drawRect» вы должны использовать «drawRoundRectComplex». Возможно, вам придется поиграться с некоторыми настройками матрицы. Кажется, я помню, что у меня были проблемы.

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

...