flex - Un VBox con solo una esquina redondeada y fondo degradado

actionscript-3 actionscript

Question

Estoy trabajando con Flex 3.4 SDK.

Estoy tratando de programar (por ejemplo, debe ser así) estilo / skin un VBox para que su esquina superior derecha se redondee, y se obtiene un degradado de dos colores.

Modificando ejemplos que encontré alrededor pude lograr ambos efectos (esquina y fondo) pero solo por separado:

VBox con no todas las esquinas redondeadas: http://livedocs.adobe.com/flex/3/html/help.html?content=skinning_6.html

VBox con fondo degradado: http://butterfliesandbugs.wordpress.com/2007/06/08/generic-background-gradient-for-containers/

Pero lo que necesito hacer es aplicar ambos al mismo tiempo. Y todos mis intentos de codificación hasta ahora han fallado silenciosamente.

¿Alguien sabría cómo hacer esto correctamente?

Answer 1

Siga los pasos de su segundo enlace, pero en lugar de usar "drawRect", debería poder usar "drawRoundRectComplex". Sin embargo, es posible que necesite jugar con algunos de los ajustes de la matriz. Me parece recordar haber tenido algunos problemas.

Otra opción es usar degrafa . Puede haber una pequeña curva de aprendizaje, pero es poderosa y puede hacer esto.

Answer 2

Tengo una publicación en mi blog sobre cómo hacer este componente exacto aquí .

Usted crea un componente MXML básico personalizado (que se extiende en este caso, VBox). Especifica un aspecto programático, que es donde se aplica el bisel y el degradado.

La máscara programática hace todo lo que dibuja en la función updateDisplayList.

Aquí hay algunos códigos (el resto está en mi blog, con una demostración)

   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();
  }

para una demostración, mira aquí . Espero que esto ayude.