2

私はベクトルに少し慣れていないので、ご容赦ください。私がやろうとしているのは、Illustrator で作成したベクター グラフィックから Flex でツールバーを作成することです。

問題は、ベクターを SVG として Flex にインポートすると、スケーリング (?) が発生し、以前の鮮明なベクターがピクセル化されることです。

最初は、私のグラフィックが小さい (32 x 32) ためだと思っていたので、Flex mxml ファイルに直接ハードコーディングしてみたところ、見栄えがよくなりました。比較は次のとおりです。

ここに画像の説明を入力

ツールチップ機能が必要なため、Spark イメージ内にベクトルを含めることを意図していたことに加えて、明らかにハードコーディングは優れたソリューションではありません。

これは私が使用しているSVGファイルです:

<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="32.469px" height="33.625px" viewBox="0 0 32.469 33.625" enable-background="new 0 0 32.469 33.625" xml:space="preserve">
<g id="New_Symbol_2">
    <g>

            <radialGradient id="SVGID_1_" cx="294.9609" cy="-374.6421" r="13.4597" gradientTransform="matrix(1 0 0 -1 -281.5 -360.8696)" gradientUnits="userSpaceOnUse">
            <stop  offset="0.8966" style="stop-color:#DDDDDD"/>
            <stop  offset="1" style="stop-color:#AAAAAA"/>
        </radialGradient>
        <path fill="url(#SVGID_1_)" stroke="#000000" stroke-width="0.25" stroke-miterlimit="10" d="M25.18,20.525
            c1.104-1.996,1.741-4.298,1.741-6.752C26.921,6.178,20.882,0,13.46,0C6.039,0,0,6.178,0,13.772c0,7.594,6.039,13.774,13.46,13.774
            c2.777,0,5.358-0.866,7.503-2.345l0.081,0.083l4.269-4.623L25.18,20.525z M13.46,23.309c-5.138,0-9.319-4.277-9.319-9.536
            c0-5.257,4.181-9.534,9.319-9.534c5.142,0,9.319,4.277,9.319,9.534C22.779,19.031,18.602,23.309,13.46,23.309z"/>

            <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="306.4043" y1="-399.7759" x2="310.9532" y2="-394.8978" gradientTransform="matrix(1 0 0 -1 -281.5 -370.375)">
            <stop  offset="0.1576" style="stop-color:#DDDDDD"/>
            <stop  offset="0.468" style="stop-color:#000000"/>
        </linearGradient>
        <path fill="url(#SVGID_2_)" stroke="#000000" stroke-width="0.25" stroke-miterlimit="10" d="M31.091,26.574l-5.778-5.913
            l-4.268,4.623l5.653,5.786C27.305,31.689,28.1,32,28.895,32s1.59-0.311,2.196-0.93C32.303,29.828,32.303,27.816,31.091,26.574z"/>

            <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="289.209" y1="-384.147" x2="301.6338" y2="-384.147" gradientTransform="matrix(1 0 0 -1 -281.5 -370.375)">
            <stop  offset="0.2808" style="stop-color:#0080FF"/>
            <stop  offset="1" style="stop-color:#0013FF"/>
        </linearGradient>

            <rect x="7.709" y="11.653" fill="url(#SVGID_3_)" stroke="#000000" stroke-width="0.25" stroke-miterlimit="10" width="12.425" height="4.238"/>

            <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="285.6406" y1="-384.1484" x2="304.2793" y2="-384.1484" gradientTransform="matrix(1 0 0 -1 -281.5 -370.375)">
            <stop  offset="0" style="stop-color:#FFFFFF"/>
            <stop  offset="1" style="stop-color:#8FD9F9"/>
        </linearGradient>
        <path fill="url(#SVGID_4_)" stroke="#000000" stroke-width="0.25" stroke-miterlimit="10" d="M13.46,4.238
            c-5.138,0-9.319,4.277-9.319,9.534c0,5.257,4.181,9.537,9.319,9.537c5.142,0,9.319-4.279,9.319-9.537
            C22.779,8.515,18.602,4.238,13.46,4.238z M7.709,15.891v-4.238h12.425v4.238H7.709z"/>
    </g>
</g>
</svg>

フレックスコードは次のとおりです。

    <?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               minWidth="955" minHeight="600">

    <!--toolbar background-->
    <s:Rect id="background" width="45" height="400">
        <s:stroke>
            <s:SolidColorStroke color="0x000000" weight="1"/>
        </s:stroke>
        <s:fill>
            <s:LinearGradient>
                <s:entries>
                    <s:GradientEntry alpha="0.1" color="0x3366FF" ratio="0.33"/>
                    <s:GradientEntry alpha="0.1" color="0x0066ff" ratio="0.66"/>
                </s:entries>
            </s:LinearGradient>
        </s:fill>
    </s:Rect>

    <!--icons-->
    <s:HGroup width="100%" height="100%" gap="0">
        <s:VGroup height="100%" gap="10" paddingBottom="5" paddingLeft="5" paddingRight="5"
                  paddingTop="5">

            <!--imported svg-->
            <s:Image id="zoomoutButton" source="@Embed(source='../images/zoomout.svg')"
                     toolTip="Zoom out"/>

            <!--same image hardcoded-->
            <s:Group>
                <s:Path x="0.125" y="0.125"
                        data="M25.1797 20.5254C26.2842 18.5293 26.9209 16.2271 26.9209 13.7729 26.9209 6.17822 20.8818 0 13.46 0 6.03906 0 0 6.17822 0 13.772 0 21.3662 6.03906 27.5459 13.46 27.5459 16.2368 27.5459 18.8184 26.6797 20.9629 25.2012L21.0439 25.2842 25.3125 20.6611       25.1797 20.5254ZM13.46 23.3086C8.32178 23.3086 4.14111 19.0312 4.14111 13.7729 4.14111 8.51611 8.32178 4.23926 13.46 4.23926 18.6016 4.23926 22.7793 8.51611 22.7793 13.7729 22.7793 19.0312 18.6016 23.3086 13.46 23.3086Z"
                        winding="nonZero">
                    <s:fill>
                        <s:RadialGradient x="13.4609" y="13.7725" scaleX="26.9194" scaleY="-26.9194">
                            <s:GradientEntry color="#DDDDDD" ratio="0.8966"/>
                            <s:GradientEntry color="#AAAAAA" ratio="1"/>
                        </s:RadialGradient>
                    </s:fill>
                    <s:stroke>
                        <s:SolidColorStroke caps="none" joints="miter" miterLimit="10" weight="0.25"/>
                    </s:stroke>
                </s:Path>
                <s:Path x="21.1699" y="20.7861"
                        data="M10.0459 5.91309 4.26758 0 0 4.62305 5.65332 10.4092C6.25977 11.0283 7.05469 11.3389 7.84961 11.3389 8.64453 11.3389 9.43945 11.0283 10.0459 10.4092 11.2578 9.16699 11.2578 7.15527 10.0459 5.91309Z"
                        winding="nonZero">
                    <s:fill>
                        <s:LinearGradient x="3.85938" y="8.73975" rotation="312.999" scaleX="6.67011">
                            <s:GradientEntry color="#DDDDDD" ratio="0.1576"/>
                            <s:GradientEntry ratio="0.468"/>
                        </s:LinearGradient>
                    </s:fill>
                    <s:stroke>
                        <s:SolidColorStroke caps="none" joints="miter" miterLimit="10" weight="0.25"/>
                    </s:stroke>
                </s:Path>
                <s:Rect x="7.83398" y="11.7778" width="12.4248" height="4.23828">
                    <s:fill>
                        <s:LinearGradient x="0" y="2.11914" scaleX="12.4248">
                            <s:GradientEntry color="#0080FF" ratio="0.2808"/>
                            <s:GradientEntry color="#0013FF" ratio="1"/>
                        </s:LinearGradient>
                    </s:fill>
                    <s:stroke>
                        <s:SolidColorStroke caps="none" joints="miter" miterLimit="10" weight="0.25"/>
                    </s:stroke>
                </s:Rect>
                <s:Path x="4.26611" y="4.36279"
                        data="M9.31885 0C4.18066 0 0 4.27734 0 9.53418 0 14.7915 4.18066 19.0708 9.31885 19.0708 14.4604 19.0708 18.6382 14.7915 18.6382 9.53418 18.6382 4.27734 14.4604 0 9.31885 0ZM3.56787 11.6533 3.56787 7.41504 15.9927 7.41504 15.9927 11.6533 3.56787 11.6533Z"
                        winding="nonZero">
                    <s:fill>
                        <s:LinearGradient x="-0.000488281" y="9.53564" scaleX="18.6387">
                            <s:GradientEntry color="#FFFFFF" ratio="0"/>
                            <s:GradientEntry color="#8FD9F9" ratio="1"/>
                        </s:LinearGradient>
                    </s:fill>
                    <s:stroke>
                        <s:SolidColorStroke caps="none" joints="miter" miterLimit="10" weight="0.25"/>
                    </s:stroke>
                </s:Path>
            </s:Group>
        </s:VGroup>
    </s:HGroup>


</s:Application>

これを適切に機能させる方法についてのヘルプ/ポインターを本当に感謝します。

ちなみにFlex 4.6.0を使用しています。

ありがとう！

フランキー

4

1 に答える 1

1

あなたの SVG ファイルは、SVG ノード自体でハードコーディングされた高さと幅を指定していることに気付きました。

... width="32.469px" height="33.625px" viewBox="0 0 32.469 33.625" ...

しかし、「ハードコードされた」バージョンでは、そのノードは明らかに存在しません。それが違いでしょうか？Flex がベクトル描画を正確に 33.625 ピクセルの高さにラスタライズ<s:Image/>し、表示リストのサイズがわずかに異なる場合、ビットマップとしてスケーリングしようとする可能性があり、これはベクトル グラフィックの目的全体を無効にします。

これらのサイズ属性を削除するだけで良くなりますか?

于 2013-07-10T19:24:48.330 に答える