当前位置: 首页 > 网络应用技术

扑动学习:使用定制图片绘制图片

时间:2023-03-08 01:04:59 网络应用技术

  扑动学习:了解定制组件和油漆对象

  扑动学习:用自定义油漆绘制路径

  扑动学习:用自定义油漆绘制图形

  扑动学习:使用自定义油漆绘制文本

  扑动学习:使用定制图片绘制图片

  与使用CustPaint绘制图形相比,绘画图片有些麻烦。

  有6种绘制图片的方法:

  此方法需要传递3个参数:

  绘图映像对象在UI库中,所有UI库首先被引用:

  在空的UI中创建图像对象:

  创建图形图的类别:

  资源图像是指资产目录中的pubspec.yaml文件中注册的图片。

  首先将资源图片变成UI.Image对象:

  使用此方法加载图片:

  如果要在页面中正确显示图片,则需要按下以下组件配置:

  创建一个空的Xfile对象,初始化ImagePicker对象:

  将图片加载到可绘制的对象中:

  从手机文件加载图片:

  使用此方法:

  分析网络图像地址:

  使用此方法:

  尽管可以顺利地绘制上述方法,但也存在致命的劣势,也就是说,动态图片无法绘制。

  如果要绘制动态图片,则需要使用InstantiateImmagecodec。

  Instantiateimagecodec方法可以传递到4个参数:

  以资源图片为例,修改代码如下:

  目前,无法绘制代码,并且只能获得动态图片的第一帧,因此该方法也可以用于绘制静态图片。

  想法:如果要绘制动态图片,则需要不断调用该方法将值传递给对象。该方法可以通过周期调用,但是动态图片刷新显示速度,这与原始的速度不同图片。没有特定的代码编写。如果您知道如何操作,可以告诉您?

  将SRC参数描述的给定图像的子集绘制到DST参数给出的轴的轴上。

  此方法需要传递4个参数:

  DrawImagerect总共需要3个步骤:

  注意:由于代码设置组件的宽度高度是图像的原始宽度高度,因此添加父组件可以允许图片通过Zoom显示与原始宽高度显示接口。它是原始宽度和高度图片。

  当DST绘制的矩形小于SRC切割的图片时,会发生什么?

  修改以下代码:

  当矩形宽度高度和绘制图像的原始比率不同时会发生什么?

  修改以下代码:

  当SRC的屏幕截图和原始比率不同时会发生什么?

  修改以下代码:

  上面的图是在上述三种情况下绘制的。可以看出,无论SRC截获的宽度和高度,它都会始终在DST绘制的矩形中完全显示,即使它是由它转换的图片宽度和高度。

  将普通图片绘制到九张图片中。您需要传递4个参数:

  上图是绘画的最终结果。此结果如何来自?

  在上图中,浅蓝色是中心矩形。黄色部分和中心部分将由整体宽度和高度伸展,因为外部条件将被拉伸。只有DST 4角的图片才会保持不变。

  在画布上绘制图像的许多部分。当您想在画布上绘制图像的许多部分时,例如使用精灵或缩放时,您可以优化使用此方法的使用。它比调用DrawImberect多倍多个更有效时代,并提供更多功能。它可以通过单独的旋转或放大分别转换为每个图像部分,并使用纯色混合或调节。

  此方法需要传递7个参数:

  变换和矩形列表的长度必须相等。如果颜色参数不是null,则必须在空的或其他两个列表中具有相同的长度。

  在上述参数中,越奇怪的是rstransform,让我们首先理解。

  该对象具有以下属性和方法:

  该对象的困难在于如何填充SCO和SSIN的值以满足我们的期望。我很长一段时间都不理解它,但是如果您只想计算字符串值和字符串值,则可以使用以下方法:

  如果您只想在不旋转的情况下移动位置,则可以使用以下参数:

  只需谈论简单的人。

  从组成部分,此方法具有以下6个参数:

  知道Rstransform的使用情况,下一个很简单。

  绘制图片的过程如下:

  颜色和Blendmode不会演示。LET查看参数cullrect。

  CulleRect可用于验证页面上的矩形是否在页面上。如果不存在,则drawatlas方法不会绘制任何内容。由于cullrct仅接受1 rect对象,必须一个一个一个一个。

  如果我们有5002000精灵图片,则由4个500 500图片组成。draplaltas中的rstransform属性将解释。精灵中每张图片的旋转中心点默认为左上角,因此每张图片的旋转中心坐标为(索引 * 500,0)。

  我们定义精灵图的类来存储此信息。

  然后,我们将这些图片的信息存储在数组中:

  使用Float32List形成矩形需要四个参数。我们有4张图片,因此需要4*4个参数:

  变换的参数必须与RECT数量相同:

  下一步我需要做的是将每张图片的信息存储在上面定义的两个阵列中的小精灵图中。这里构造构造的rect的方法是rect.fromltrb:

  可以直接绘制:

  渲染与rstransform相同。

  对于如何使用参数,您可以在此处查看。以帮助我复制下面的答案。

  我们首先定义一个用于存储颜色的INT32LIST:

  然后在链接中添加两个方法:

  方法一

  方法两个

  使用:

  在画布上绘制给定的图片。仅通过1个参数:

  要获取Piction对象,我们需要一个PictureRecorder对象。

  然后重新定义画布对象:

  绘制我们要用重新定义的帆布对象绘制的内容:

  绘制后,您需要调用endRecording方法以获取图片对象:

  完整代码:

  PictureRecorder对象具有一个ISRECORTING属性,可以检查当前是否正在录制命令。特别是,如果创建了canvas对象来录制命令,并且尚未通过调用endRecording来使用录制,则返回true;如果此PictureRecorder与画布无关,或者调用了端录制方法,则返回false。

  原始:https://juejin.cn/post/7094831386485325860