フレックスのSVGイメージのスケーリング

Question

フレックスのSVGをスケーリングすると、以下に示すようにイメージの一部がクリップされるという問題があります（右下が切​​り取られ、左）

は、ここに私のコードです：

<?xml version="1.0" encoding="utf-8"?> 
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" actionBarVisible="false" 
     xmlns:s="library://ns.adobe.com/flex/spark" title="Table"> 
    <s:layout> 
     <s:HorizontalLayout paddingTop="10"/> 
    </s:layout> 
    <fx:Script> 
     <![CDATA[ 
      [Embed(source="/assets/table.svg")] 
      [Bindable] 
      public var table:Class; 
     ]]> 
    </fx:Script> 
     <s:Image source="{table}" width="50%" height="50%" verticalCenter="0" horizontalCenter="0" scaleMode="stretch" smooth="true" smoothingQuality="high"/> 
</s:View> 

私は、SVGはこのように見えないことを確認することができ、私は多くのSVGsで試してみましたが、すべてが同じ結果を持っています.. 。

多くのデバイスやdpisでモバイルアプリケーション全体にスケーラブルなイメージを作成したいのですが、スケーラブルイメージを取得するにはこれが最善の方法ですか？

乾杯

EDIT：SVGコード

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 15.0.1, 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" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1024px" 
    height="600px" viewBox="0 0 1024 600" enable-background="new 0 0 1024 600" xml:space="preserve"> 
<g id="Layer_2"> 
    <path fill="#3C2415" stroke="#000000" stroke-miterlimit="10" d="M961,463.486c0,52.262-42.366,94.627-94.627,94.627H104.627 
     C52.366,558.113,10,515.748,10,463.486V161.627C10,109.366,52.366,67,104.627,67h761.746C918.634,67,961,109.366,961,161.627 
     V463.486z"/> 
</g> 
<g id="Layer_1"> 
    <path fill="#006838" stroke="#000000" stroke-miterlimit="10" d="M947.752,450.238c0,52.262-42.365,94.627-94.626,94.627H119.767 
     c-52.261,0-94.626-42.365-94.626-94.627V175.821c0-52.261,42.366-94.627,94.626-94.627h733.359 
     c52.261,0,94.626,42.366,94.626,94.627V450.238z"/> 
    <path fill="#A97C50" stroke="#000000" stroke-miterlimit="10" d="M457,248.5c0,37.832-30.668,68.5-68.5,68.5h-115 
     c-37.832,0-68.5-30.668-68.5-68.5l0,0c0-37.832,30.668-68.5,68.5-68.5h115C426.332,180,457,210.668,457,248.5L457,248.5z"/> 
</g> 
</svg> 

Answer 1

ここで私はついにに落ち着いものだ - だけでなくFXG、SVG、およびラスタイメージで動作します。レコードのために、私はどこかでこれを盗んだし、それを正しく動作させるための編集をしました。また、Illustratorで、選択したアートワークに合うようにアートボードのサイズを変更してから、SVGのエクスポートオプションですべてのBSのチェックを外し、Adobeプレビューのクラップもオフにします。

package Core.Controls 
{ 
import flash.display.DisplayObject; 
import flash.geom.Rectangle; 

import mx.core.UIComponent; 

import spark.primitives.Rect; 

public class VectorImage extends UIComponent 
{ 
    public function VectorImage(source:Class = null) 
    { 
     if(source){ 
      this.source = source; 
     } 
     super(); 
    } 

    private var _source : Class; 
    protected var sourceChanged :Boolean = true; 


    public function get source():Class 
    { 
     return _source; 
    } 

    public function set source(value:Class):void 
    { 
     _source = value; 
     sourceChanged = true; 
     this.commitProperties(); 
    } 

    protected var imageInstance : DisplayObject; 


    override protected function createChildren():void{ 
     super.createChildren(); 

     // if the source has changed we want to create, or recreate, the image instance 
     if(this.sourceChanged){ 
      // if the instance has a value, then delete it 
      if(this.imageInstance){ 
       this.removeChild(this.imageInstance); 
       this.imageInstance = null; 
      } 

      // if we have a source value; create the source 
      if(this.source){ 
       this.imageInstance = new source(); 
       this.addChild(this.imageInstance); 
      } 
      this.sourceChanged = false; 

     } 
    } 

    /** 
    * @private 
    */ 
    override protected function commitProperties():void{ 
     super.commitProperties(); 

     if(this.sourceChanged){ 
      // if the source changed re-created it; which is done in createChildren(); 
      this.createChildren(); 
     } 
    } 

    override protected function measure():void 
    { 
     if(imageInstance != null) 
     { 
      this.measuredWidth = imageInstance.width; 
      this.measuredHeight = imageInstance.height; 
      this.minWidth = 5; 
      this.minHeight = 5; 
     } 
    } 

    override public function setActualSize(width:Number, height:Number):void 
    { 
     this.width = width; 
     this.height = height; 
     ScaleImage(width, height); 
    } 

    /** 
    * @private 
    */ 
    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{ 
     super.updateDisplayList(unscaledWidth, unscaledHeight); 

     // size the element. 
     // I don't remember why I Wrote the code to check for unscaledHeight and unscaledWidth being 0 

     if(imageInstance != null) 
     { 

      //scale properly 
      ScaleImage(unscaledWidth, unscaledHeight); 
     } 
    } 

    protected function ScaleImage(width:Number, height:Number) 
    { 
     if(imageInstance != null) 
     { 
      var scale:Number = Math.min(width/imageInstance.width, height/imageInstance.height); 

      var scaleWidth:Number = (int)(imageInstance.width * scale); 
      var scaleHeight:Number = (int)(imageInstance.height * scale); 

      imageInstance.width = scaleWidth; 
      imageInstance.height = scaleHeight; 

      imageInstance.x = (width - imageInstance.width) *.5; 
      imageInstance.y = (height- imageInstance.height) *.5; 
     } 
    } 
} 
} 

Answer 2

問題は、あなたが50に画像のサイズを決定している。この

<s:Image source="{table}" width="50%" height="50%" 

である（イラストレーターから直接輸出などメッシー）それが入っているコンテナの％。

このようなものを試してください。

<s:Image source="{table}" width="{table.width}" height="{table.height}" 

または単に幅と高さを取り除くだけです。

スケールが変更されたときに画像のサイズを変更する必要があります。私はあなたが何をしたいと思います

Answer 3

は次のとおりです。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" 
width="100%" height="100%" 
viewBox="0 0 1024 600" 
preserveAspectRatio="xMinYMin meet">