Comment créer une ombre portée, telle qu'un effet flottant autour d'un composant de la toile en flex?
-
04-07-2019 - |
Question
Je souhaite créer une ombre portée autour du composant de la zone de dessin dans flex. Techniquement, il ne s'agira pas d'une ombre, car je souhaite que le composant s'enroule autour de lui pour lui donner un aspect flottant. Je peux peut-être le faire avec éclat, mais est-ce que quelqu'un peut laisser tomber une ligne ou deux qui l'ont déjà fait?
Merci d'avance.
La solution
Je l'ai effectivement résolu en faisant ceci:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
width="780" height="100%" borderStyle="solid" borderColor="gray"
creationComplete="init();" backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.styles.StyleManager;
private function init():void {
var glow:GlowFilter = new GlowFilter();
glow.color = StyleManager.getColorName("gray");
glow.alpha = 0.8;
glow.blurX = 4;
glow.blurY = 4;
glow.strength = 6;
glow.quality = BitmapFilterQuality.HIGH;
this.filters = [glow];
}
]]>
</mx:Script>
</mx:Canvas>
Autres conseils
Vous pouvez utiliser DropShadowFilter
mais cela ressemble plus ou moins à la même chose:
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
width="780" height="100%" borderStyle="solid" borderColor="gray"
creationComplete="init();" backgroundColor="white" dropShadowEnabled="true">
<mx:filters>
<mx:DropShadowFilter
quality="1"
color="gray"
alpha="0.8"
distance="0"
blurX="4"
blurY="4"
strength="6"
/>
</mx:filters>
</mx:Canvas>
En flex 4, j'utilise ce qui suit. Je voulais juste poster ceci parce que la propriété filters devrait ressembler à l'image ci-dessous. (oui je sais que j'utilise un filtre anti-étincelles sur un objet mx)
<fx:Declarations>
<s:GlowFilter
id="glowBlack"
alpha=".6"
color="0x000000"
inner="false"
blurX="10"
blurY="10"
quality = "2"
/>
<mx:Image id="rssIcon"
height="70"
filters="{[glowBlack]}"
source="assets/rss/icon_rss.png"
styleName="rssIconStyle"
width="70"
scaleContent="true"
click="openRssSite(event)"
"/>
Si vous souhaitez le définir en dehors du canevas, procédez comme suit:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
width="780" height="100%">
<mx:Canvas filters="[dropShadow]" width="200" height="200" backgroundColor="white"/>
<mx:DropShadowFilter id="dropShadow" distance="0"/>
</mx:Application>
Vous pourrez peut-être le faire avec degrafa et le skinning. Leurs documents sont limités, mais vous pouvez visionner l’une des vidéos du didacticiel pour savoir comment créer des skins. Ou regardez leur exemple de code. Attribuez simplement un skin programmatique degrafa à la bordure de votre toile et vous pouvez ajouter toutes sortes de dégradés, chemins, formes, etc.
En fonction de vos besoins, vous pourrez peut-être vous en sortir:
<mx:Canvas ... dropShadowEnabled="true" shadowDirection="right">
Il existe des réserves .. ici