Image的centerSlice不起作用

liusujin commented 5 years ago

尝试使用centerSlice将原图为310×90的图片显示为540×90时，使用如下代码时报错。 public class BottomPanel : StatelessWidget { public override Widget build(BuildContext context) { return Unity.UIWidgets.widgets.Image.file(UnityEngine.Application.dataPath + "/AddressableAssets/UISprite/bottom-btn-bg.png", width: 540, height: 90, fit: BoxFit.fill, centerSlice: Rect.fromLTRB(150f, 40f, 150f, 40f)); } } 运行结果为不显示任何图片。报错为： AssertionError: Error caught by scheduler library, thrown during a scheduler callback. Object reference not set to an instance of an object at Unity.UIWidgets.ui.uiRectHelper.fromRect (Unity.UIWidgets.ui.Rect rect) [0x00001] in E:\RD-NE19042\Unity\Library\PackageCache\com.unity.uiwidgets@1.5.4-preview.0\Runtime\ui\renderer\common\geometry\rect.cs:99 at Unity.UIWidgets.ui.PictureFlusher._drawPicture (Unity.UIWidgets.ui.Picture picture, System.Boolean needsSave) [0x003e2] in E:\RD-NE19042\Unity\Library\PackageCache\com.unity.uiwidgets@1.5.4-preview.0\Runtime\ui\renderer\cmdbufferCanvas\rendering\canvas_impl.cs:842 at Unity.UIWidgets.ui.PictureFlusher._drawUIPicture (Unity.UIWidgets.ui.uiPicture picture, System.Boolean needsSave) [0x003d6] in E:\RD-NE19042\Unity\Library\PackageCache\com.unity.uiwidgets@1.5.4-preview.0\Runtime\ui\renderer\cmdbufferCanvas\rendering\canvas_impl.cs:973 at Unity.UIWidgets.ui.PictureFlusher.flush (Unity.UIWidgets.ui.uiPicture picture) [0x0000f] in E:\RD-NE19042\Unity\Library\PackageCache\com.unity.uiwidgets@1.5.4-preview.0\Runtime\ui\renderer\cmdbufferCanvas\rendering\canvas_impl.cs:1033 at Unity.UIWidgets.ui.CommandBufferCanvas.flush () [0x0000d] in E:\RD-NE19042\Unity\Library\PackageCache\com.unity.uiwidgets@1.5.4-preview.0\Runtime\ui\renderer\cmdbufferCanvas\command_buffer_canvas.cs:18 at Unity.UIWidgets.editor.WindowSurfaceImpl._presentSurface (Unity.UIWidgets.ui.Canvas canvas) [0x00011] in E:\RD-NE19042\Unity\Library\PackageCache\com.unity.uiwidgets@1.5.4-preview.0\Runtime\editor\surface.cs:135 at Unity.UIWidgets.editor.WindowSurfaceImpl.<acquireFrame>b__9_0 (Unity.UIWidgets.editor.SurfaceFrame frame, Unity.UIWidgets.ui.Canvas canvas) [0x00000] in E:\RD-NE19042\Unity\Library\PackageCache\com.unity.uiwidgets@1.5.4-preview.0\Runtime\editor\surface.cs:111 at Unity.UIWidgets.editor.SurfaceFrame._performSubmit () [0x00013] in E:\RD-NE19042\Unity\Library\PackageCache\com.unity.uiwidgets@1.5.4-preview.0\Runtime\editor\surface.cs:48 at Unity.UIWidgets.editor.SurfaceFrame.submit () [0x00010] in E:\RD-NE19042\Unity\Library\PackageCache\com.unity.uiwidgets@1.5.4-preview.0\Runtime\editor\surface.cs:38 at Unity.UIWidgets.editor.Rasterizer._drawToSurface (Unity.UIWidgets.flow.LayerTree layerTree) [0x00064] in E:\RD-NE19042\Unity\Library\PackageCache\com.unity.uiwidgets@1.5.4-preview.0\Runtime\editor\rasterizer.cs:75 at Unity.UIWidgets.editor.Rasterizer._doDraw (Unity.UIWidgets.flow.LayerTree layerTree) [0x00017] in E:\RD-NE19042\Unity\Library\PackageCache\com.unity.uiwidgets@1.5.4-preview.0\Runtime\editor\rasterizer.cs:57 at Unity.UIWidgets.editor.Rasterizer.draw (Unity.UIWidgets.flow.LayerTree layerTree) [0x00001] in E:\RD-NE19042\Unity\Library\PackageCache\com.unity.uiwidgets@1.5.4-preview.0\Runtime\editor\rasterizer.cs:41 at Unity.UIWidgets.editor.WindowAdapter.render (Unity.UIWidgets.ui.Scene scene) [0x0003f] in E:\RD-NE19042\Unity\Library\PackageCache\com.unity.uiwidgets@1.5.4-preview.0\Runtime\editor\editor_window.cs:512 at Unity.UIWidgets.rendering.RenderView.compositeFrame () [0x00015] in E:\RD-NE19042\Unity\Library\PackageCache\com.unity.uiwidgets@1.5.4-preview.0\Runtime\rendering\view.cs:120 at Unity.UIWidgets.rendering.RendererBinding.drawFrame () [0x00025] in E:\RD-NE19042\Unity\Library\PackageCache\com.unity.uiwidgets@1.5.4-preview.0\Runtime\rendering\binding.cs:90 at Unity.UIWidgets.widgets.WidgetsBinding.drawFrame () [0x00047] in E:\RD-NE19042\Unity\Library\PackageCache\com.unity.uiwidgets@1.5.4-preview.0\Runtime\widgets\binding.cs:153 at Unity.UIWidgets.rendering.RendererBinding._handlePersistentFrameCallback (System.TimeSpan timeStamp) [0x00001] in E:\RD-NE19042\Unity\Library\PackageCache\com.unity.uiwidgets@1.5.4-preview.0\Runtime\rendering\binding.cs:73 at Unity.UIWidgets.scheduler.SchedulerBinding._invokeFrameCallback (Unity.UIWidgets.ui.FrameCallback callback, System.TimeSpan timeStamp, System.String callbackStack) [0x0003c] in E:\RD-NE19042\Unity\Library\PackageCache\com.unity.uiwidgets@1.5.4-preview.0\Runtime\scheduler\binding.cs:356 Unity.UIWidgets.ui.uiRectHelper.fromRect (Unity.UIWidgets.ui.Rect rect) (at Library/PackageCache/com.unity.uiwidgets@1.5.4-preview.0/Runtime/ui/renderer/common/geometry/rect.cs:99) Unity.UIWidgets.ui.PictureFlusher._drawPicture (Unity.UIWidgets.ui.Picture picture, System.Boolean needsSave) (at Library/PackageCache/com.unity.uiwidgets@1.5.4-preview.0/Runtime/ui/renderer/cmdbufferCanvas/rendering/canvas_impl.cs:842) Unity.UIWidgets.ui.PictureFlusher._drawUIPicture (Unity.UIWidgets.ui.uiPicture picture, System.Boolean needsSave) (at Library/PackageCache/com.unity.uiwidgets@1.5.4-preview.0/Runtime/ui/renderer/cmdbufferCanvas/rendering/canvas_impl.cs:973) Unity.UIWidgets.ui.PictureFlusher.flush (Unity.UIWidgets.ui.uiPicture picture) (at Library/PackageCache/com.unity.uiwidgets@1.5.4-preview.0/Runtime/ui/renderer/cmdbufferCanvas/rendering/canvas_impl.cs:1033) Unity.UIWidgets.ui.CommandBufferCanvas.flush () (at Library/PackageCache/com.unity.uiwidgets@1.5.4-preview.0/Runtime/ui/renderer/cmdbufferCanvas/command_buffer_canvas.cs:18) Unity.UIWidgets.editor.WindowSurfaceImpl._presentSurface (Unity.UIWidgets.ui.Canvas canvas) (at Library/PackageCache/com.unity.uiwidgets@1.5.4-preview.0/Runtime/editor/surface.cs:135) Unity.UIWidgets.editor.WindowSurfaceImpl.<acquireFrame>b__9_0 (Unity.UIWidgets.editor.SurfaceFrame frame, Unity.UIWidgets.ui.Canvas canvas) (at Library/PackageCache/com.unity.uiwidgets@1.5.4-preview.0/Runtime/editor/surface.cs:111) Unity.UIWidgets.editor.SurfaceFrame._performSubmit () (at Library/PackageCache/com.unity.uiwidgets@1.5.4-preview.0/Runtime/editor/surface.cs:48) Unity.UIWidgets.editor.SurfaceFrame.submit () (at Library/PackageCache/com.unity.uiwidgets@1.5.4-preview.0/Runtime/editor/surface.cs:38) Unity.UIWidgets.editor.Rasterizer._drawToSurface (Unity.UIWidgets.flow.LayerTree layerTree) (at Library/PackageCache/com.unity.uiwidgets@1.5.4-preview.0/Runtime/editor/rasterizer.cs:75) Unity.UIWidgets.editor.Rasterizer._doDraw (Unity.UIWidgets.flow.LayerTree layerTree) (at Library/PackageCache/com.unity.uiwidgets@1.5.4-preview.0/Runtime/editor/rasterizer.cs:57) Unity.UIWidgets.editor.Rasterizer.draw (Unity.UIWidgets.flow.LayerTree layerTree) (at Library/PackageCache/com.unity.uiwidgets@1.5.4-preview.0/Runtime/editor/rasterizer.cs:41) Unity.UIWidgets.editor.WindowAdapter.render (Unity.UIWidgets.ui.Scene scene) (at Library/PackageCache/com.unity.uiwidgets@1.5.4-preview.0/Runtime/editor/editor_window.cs:512) Unity.UIWidgets.rendering.RenderView.compositeFrame () (at Library/PackageCache/com.unity.uiwidgets@1.5.4-preview.0/Runtime/rendering/view.cs:120) Unity.UIWidgets.rendering.RendererBinding.drawFrame () (at Library/PackageCache/com.unity.uiwidgets@1.5.4-preview.0/Runtime/rendering/binding.cs:90) Unity.UIWidgets.widgets.WidgetsBinding.drawFrame () (at Library/PackageCache/com.unity.uiwidgets@1.5.4-preview.0/Runtime/widgets/binding.cs:153) Unity.UIWidgets.rendering.RendererBinding._handlePersistentFrameCallback (System.TimeSpan timeStamp) (at Library/PackageCache/com.unity.uiwidgets@1.5.4-preview.0/Runtime/rendering/binding.cs:73) Unity.UIWidgets.scheduler.SchedulerBinding._invokeFrameCallback (Unity.UIWidgets.ui.FrameCallback callback, System.TimeSpan timeStamp, System.String callbackStack) (at Library/PackageCache/com.unity.uiwidgets@1.5.4-preview.0/Runtime/scheduler/binding.cs:356) UnityEngine.Debug:LogException(Exception) Unity.UIWidgets.foundation.D:logError(String, Exception) (at Library/PackageCache/com.unity.uiwidgets@1.5.4-preview.0/Runtime/foundation/debug.cs:15) Unity.UIWidgets.foundation.UIWidgetsError:dumpErrorToConsole(UIWidgetsErrorDetails, Boolean) (at Library/PackageCache/com.unity.uiwidgets@1.5.4-preview.0/Runtime/foundation/assertions.cs:120) Unity.UIWidgets.foundation.UIWidgetsError:dumpErrorToConsole(UIWidgetsErrorDetails) (at Library/PackageCache/com.unity.uiwidgets@1.5.4-preview.0/Runtime/foundation/assertions.cs:105) Unity.UIWidgets.foundation.UIWidgetsError:reportError(UIWidgetsErrorDetails) (at Library/PackageCache/com.unity.uiwidgets@1.5.4-preview.0/Runtime/foundation/assertions.cs:131) Unity.UIWidgets.scheduler.SchedulerBinding:_invokeFrameCallback(FrameCallback, TimeSpan, String) (at Library/PackageCache/com.unity.uiwidgets@1.5.4-preview.0/Runtime/scheduler/binding.cs:358) Unity.UIWidgets.scheduler.SchedulerBinding:handleDrawFrame() (at Library/PackageCache/com.unity.uiwidgets@1.5.4-preview.0/Runtime/scheduler/binding.cs:297) Unity.UIWidgets.scheduler.SchedulerBinding:_handleDrawFrame() (at Library/PackageCache/com.unity.uiwidgets@1.5.4-preview.0/Runtime/scheduler/binding.cs:234) Unity.UIWidgets.editor.WindowAdapter:_beginFrame() (at Library/PackageCache/com.unity.uiwidgets@1.5.4-preview.0/Runtime/editor/editor_window.cs:330) Unity.UIWidgets.editor.WindowAdapter:_doOnGUI(Event) (at Library/PackageCache/com.unity.uiwidgets@1.5.4-preview.0/Runtime/editor/editor_window.cs:338) Unity.UIWidgets.editor.WindowAdapter:OnGUI(Event) (at Library/PackageCache/com.unity.uiwidgets@1.5.4-preview.0/Runtime/editor/editor_window.cs:307) Unity.UIWidgets.engine.UIWidgetWindowAdapter:OnGUI(Event) (at Library/PackageCache/com.unity.uiwidgets@1.5.4-preview.0/Runtime/engine/UIWidgetsPanel.cs:54) Unity.UIWidgets.engine.UIWidgetsPanel:Update() (at Library/PackageCache/com.unity.uiwidgets@1.5.4-preview.0/Runtime/engine/UIWidgetsPanel.cs:231)

zhuxingwei commented 5 years ago

hi 多谢您的帮助！！经查这个是由于之前优化代码的BUG导致的。在 #323 ##这个PR中已经fix了。目前dev分支已经正常，等qa流程后我们会尽快合并到最新的master分支(#324)。

liusujin commented 5 years ago

我将 #323 中三个文件修改同步到我本地了但是似乎并没有作用，希望能够确认下，还是说我还需要修改替换其他的文件或者直接将本地替换为dev分支？

zhuxingwei commented 5 years ago

哦哦，你那边还是会报错吗？同样的错误吗？错误信息可以再贴一下吗？我这边本地测试是在dev分支上，且用的Image.asset这个API测试的。多谢！

liusujin commented 5 years ago

没有报错信息只是未显示任何内容，使用的API是Image.file,在Unity2018.4.8f1 Windows10编辑器下测试的.UIWidgets_DEBUG宏也打开了。

zhuxingwei commented 5 years ago

这是我这边测试用的代码，你那边应该直接就可以跑。我这边测试结果是没问题的，图片可以正常显示。 public class BottomPanel : StatelessWidget { public override Widget build(BuildContext context) { var srcPath = Application.dataPath; var lastSlash = srcPath.LastIndexOf('/'); var newSrcPath = srcPath.Substring(0, lastSlash) + "/Packages/com.unity.uiwidgets/Tests/Resources/india_thanjavur_market.png"; return Unity.UIWidgets.widgets.Image.file( newSrcPath, width: 540, height: 90, fit: BoxFit.fill, centerSlice: Rect.fromLTRB(150f, 40f, 150f, 40f) ); } }

liusujin commented 5 years ago

我现在的测试代码为 ` using System.Collections.Generic; using Unity.UIWidgets.engine; using Unity.UIWidgets.material; using Unity.UIWidgets.painting; using Unity.UIWidgets.ui; using Unity.UIWidgets.widgets;

namespace UIWidgets { public class ImageSliceSample : UIWidgetsPanel { protected override Widget createWidget() { return new MaterialApp( home: new Scaffold( body: new Stack( children: new List { new Align( alignment:Alignment.center, child:new BottomPanel() ), } ) ) ); } }

public class BottomPanel : StatelessWidget
{
    public override Widget build(BuildContext context)
    {
        string srcPath = UnityEngine.Application.dataPath;
        int lastSlash = srcPath.LastIndexOf('/');
        string newSrcPath = srcPath.Substring(0, lastSlash) + "/Packages/com.unity.uiwidgets/Tests/Resources/india_thanjavur_market.png";
        return Unity.UIWidgets.widgets.Image.file(
        newSrcPath, width: 540, height: 90, fit: BoxFit.fill, centerSlice: Rect.fromLTRB(150f, 40f, 150f, 40f)
        );
    }
}

} ` 挂载在场景中，显示效果如下：，这个显示效果和您那边是否一样？

zhuxingwei commented 5 years ago

嗯，我这边的显示效果是类似的。这个图片居中显示。这个有什么问题吗？

liusujin commented 5 years ago

如果我想将这张图片的宽高拉升至1024×1024，需要怎么做，我修改宽高没有起作用。

zhuxingwei commented 5 years ago

你可以试试下面的代码。我这里固定大小是500500，方便观察。你可以改成10241024

using System.Collections.Generic; using Unity.UIWidgets.engine; using Unity.UIWidgets.material; using Unity.UIWidgets.painting; using Unity.UIWidgets.ui; using Unity.UIWidgets.widgets;

namespace UIWidgets { public class UIWidgetsSamples : UIWidgetsPanel { protected override Widget createWidget() { return new MaterialApp( home: new Scaffold( body: new Stack( children: new List { new Align( alignment:Alignment.center, child:new BottomPanel() ), } ) ) ); } }

public class BottomPanel : StatelessWidget
{
    public override Widget build(BuildContext context)
    {
        string srcPath = UnityEngine.Application.dataPath;
        int lastSlash = srcPath.LastIndexOf('/');
        string newSrcPath = srcPath.Substring(0, lastSlash) + "/Packages/com.unity.uiwidgets/Tests/Resources/india_thanjavur_market.png";
        return new Container(
            width: 500, 
            height: 500,
            child: new SizedBox(
                width: 500,
                height: 500),
            decoration: new BoxDecoration(image: new DecorationImage(
                fit: BoxFit.fill,
                image: new FileImage(
                    file: newSrcPath)))
            );

    }
}

}

liusujin commented 5 years ago

这种没有办法解决图片的拉伸变形问题，主要是想通过centerslice来避免图片的拉伸变形问题。

zhuxingwei commented 5 years ago

这样应该可以了吧？会按照九宫格将图片分割，只会拉伸周围的几个格子，中心的格子不会被拉伸。

using System.Collections.Generic; using Unity.UIWidgets.engine; using Unity.UIWidgets.material; using Unity.UIWidgets.painting; using Unity.UIWidgets.ui; using Unity.UIWidgets.widgets; using Image = Unity.UIWidgets.widgets.Image;

namespace UIWidgets { public class UIWidgetsSamples : UIWidgetsPanel { protected override Widget createWidget() { return new MaterialApp( home: new Scaffold( body: new Stack( children: new List { new BottomPanel() } ) ) ); } }

public class BottomPanel : StatelessWidget
{
    public override Widget build(BuildContext context)
    {
        string srcPath = UnityEngine.Application.dataPath;
        int lastSlash = srcPath.LastIndexOf('/');
        string newSrcPath = srcPath.Substring(0, lastSlash) + "/Packages/com.unity.uiwidgets/Tests/Resources/india_thanjavur_market.png";
        return new Positioned(
            child: Image.file(newSrcPath,
                fit: BoxFit.fill,
                centerSlice: Rect.fromLTRB(6.0f, 1.0f, 17.0f, 49.0f)),
            left: 0.0f,
            right: 0.0f,
            top: 0.0f,
            bottom: 0.0f);
    }
}

}

liusujin commented 5 years ago

uiwidgets能否做到想ugui一样的九宫格拉伸效果，目前是在使用中无法达到同样的效果。

zhuxingwei commented 5 years ago

哦哦。https://github.com/flutter/flutter/issues/16098 这个case的效果是你需要的吗？如果是的话，uiWidgets用同样的方法也是可以达到这种效果的。虽然目前UIWidgets相关的资源和文档还比较欠缺，但flutter相关的文档都是可以直接拿来参考的，你可以试试？

liusujin commented 5 years ago

好的，我试下，谢谢！

liusujin commented 5 years ago

看了下，flutter没有完美支持.9，希望UIWidgets能参照UGUI来解决这个问题。

UnityTech / UIWidgets

Image的centerSlice不起作用 #322