Question

我遇到了一个问题，当我在flex中缩放SVG时，它会剪切图像的一部分，如下所示（右下角被剪掉，它应该是圆角的，就像左上角一样）

enter image description here

这是我的代码：

<?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看起来不像这样，我尝试过很多SVG，并且都有相同的结果......

我希望在我的移动应用程序中通过许多设备和dpis提供可扩展的图像，这是获得可扩展图像的最佳方式吗？

干杯

编辑：SVG代码（从Illustrator直接导出凌乱）

<?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

问题出在这个

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

您正在将图像调整为其所在容器的50％。

尝试这样的事情。

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

或者只是取出宽度和高度。

最糟糕的情况是，您需要在更改比例时调整图像大小。

Answer 2

以下是我最终确定的内容 - 与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 3

我认为你想要的是：

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

在Flex中缩放SVG图像

3 个答案: