egret纹理填充模式(上下填充)

简介: egret纹理填充模式(上下填充)
推荐阅读:

首先,我们准备两张图片,一张作为背景“瓶子”,一张作位填充物“饮料”。
在这里插入图片描述
在皮肤里我们设置右边图片的填充模式为“repeat”,修改Y的缩放为:-1。,调整图片位置使之与地图重合,如下:
在这里插入图片描述
现在,我们可以通过修改填充图片的高度来增加或减少填充物,代码如下:

//更新聊天界面好感度
let heartNum=50;//数字
//假设填充物的计算方法为:heartNum*0.75+25
if (heartNum < 100) {
this.goodImg.height = heartNum * 0.75 + 25;
}

需要特别说明的是。填充图片须为正常方向旋转180度后的图片。
如下:

       ![在这里插入图片描述](https://ucc.alicdn.com/images/user-upload-01/img_convert/874e10f9145ff33ff4f206bc7876a596.png)&emsp; &emsp; ![在这里插入图片描述](https://ucc.alicdn.com/images/user-upload-01/img_convert/7cd235a13af27263cfcec18fe04b2433.png)                 
    &emsp; 正常                                       &emsp; &emsp; &emsp; &emsp;  旋转180度后

效果如下:
在这里插入图片描述

相关文章
|
5月前
|
前端开发
css动画 —— 自定义不规则的动画路径 offset-path (含不规则的动画路径参数获取方法)
css动画 —— 自定义不规则的动画路径 offset-path (含不规则的动画路径参数获取方法)
122 1
|
5月前
|
机器学习/深度学习 前端开发 算法
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(二)
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(二)
94 0
|
5月前
|
存储 前端开发 JavaScript
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(一)
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(一)
501 0
|
5月前
|
Web App开发 前端开发
canvas系列教程04 —— 渐变、阴影、路径、状态、Canvas对象、图形重叠模式
canvas系列教程04 —— 渐变、阴影、路径、状态、Canvas对象、图形重叠模式
466 0
|
存储 前端开发
canvas自定义绘制顺序解决遮挡问题
canvas自定义绘制顺序解决遮挡问题
253 0
SwiftUI—如何以动画的方式显示或隐藏指定的位图
SwiftUI—如何以动画的方式显示或隐藏指定的位图
338 0
SwiftUI—如何以动画的方式显示或隐藏指定的位图
|
异构计算
【OpenGL】十、OpenGL 绘制点 ( 初始化 OpenGL 矩阵 | 设置投影矩阵 | 设置模型视图矩阵 | 绘制点 | 清除缓冲区 | 设置当前颜色值 | 设置点大小 | 绘制点 )(一)
【OpenGL】十、OpenGL 绘制点 ( 初始化 OpenGL 矩阵 | 设置投影矩阵 | 设置模型视图矩阵 | 绘制点 | 清除缓冲区 | 设置当前颜色值 | 设置点大小 | 绘制点 )(一)
510 0
【OpenGL】十、OpenGL 绘制点 ( 初始化 OpenGL 矩阵 | 设置投影矩阵 | 设置模型视图矩阵 | 绘制点 | 清除缓冲区 | 设置当前颜色值 | 设置点大小 | 绘制点 )(一)
【OpenGL】十、OpenGL 绘制点 ( 初始化 OpenGL 矩阵 | 设置投影矩阵 | 设置模型视图矩阵 | 绘制点 | 清除缓冲区 | 设置当前颜色值 | 设置点大小 | 绘制点 )(二)
【OpenGL】十、OpenGL 绘制点 ( 初始化 OpenGL 矩阵 | 设置投影矩阵 | 设置模型视图矩阵 | 绘制点 | 清除缓冲区 | 设置当前颜色值 | 设置点大小 | 绘制点 )(二)
182 0
【OpenGL】十、OpenGL 绘制点 ( 初始化 OpenGL 矩阵 | 设置投影矩阵 | 设置模型视图矩阵 | 绘制点 | 清除缓冲区 | 设置当前颜色值 | 设置点大小 | 绘制点 )(二)
|
API Android开发
【Android 内存优化】自定义组件长图组件 ( 获取图像宽高 | 计算解码区域 | 设置图像解码属性 复用 像素格式 | 图像绘制 )
【Android 内存优化】自定义组件长图组件 ( 获取图像宽高 | 计算解码区域 | 设置图像解码属性 复用 像素格式 | 图像绘制 )
175 0
【Android 内存优化】自定义组件长图组件 ( 获取图像宽高 | 计算解码区域 | 设置图像解码属性 复用 像素格式 | 图像绘制 )