flexのキャンバスコンポーネントの周りにフローティング効果のようなドロップシャドウを作成するにはどうすればよいですか?
-
04-07-2019 - |
質問
Flexのキャンバスコンポーネントの周囲にドロップシャドウを作成します。技術的に言えば、コンポーネントの周りをラップして、コンポーネントにフローティングの外観を与えたいので、シャドウではありません。グローでそれを行うことができるかもしれませんが、すでにそれを行っている人は誰でも1つまたは2つドロップできますか?
事前に感謝します。
解決
実際にこれを実行して解決しました:
<?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>
他のヒント
DropShadowFilter
を使用できますが、ほぼ同じように見えます:
<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>
フレックス4では、以下を使用しています。 filtersプロパティは以下の画像のようになるはずなので、これを投稿したかっただけです。 (はい、私は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)"
"/>
キャンバスの外側で定義したい場合、これを行うことができます:
<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>
degrafa とスキニングを使用して実行できる場合があります。ドキュメントは限られていますが、スキンの作成方法に関するチュートリアルビデオのいずれかを見ることができます。または、サンプルコードをご覧ください。 degrafaプログラムスキンをキャンバスの境界に割り当てるだけで、あらゆる種類のファンキーなグラデーション、パス、シェイプなどを追加できます。
ニーズに応じて、次の方法で逃げることができます。
<mx:Canvas ... dropShadowEnabled="true" shadowDirection="right">
注意事項があります。概要はこちら
所属していません StackOverflow