leaferjs
关于小程序版本，在微信小程序中使用时，频繁快速调整元素大小会导致内存溢出的问题。
版本：小程序版本v1.6.2。 设备：测试设备苹果13。 场景：添加一个图片元素，只是对该元素不停地调整其大小，经过10秒左右小程序会提示内存溢出，或者直接微信闪退。不同的设备可能操作时间不同。 步骤：添加元素后，按住元素编辑器一边，然后不停地来回拖动调整元素大小。 复现率：100%。 备注：后续操作发现，只要不断调整图片元素大小就会导致内存溢出问题。代码片段只展示必现的情况。 截图： https://github.com/wangxuejun/imgs/blob/f2b717d8b6755a7af0aa073697c3f83d280cc3b1/1747706511907.jpg?raw=true 代码环境：uni-app，微信小程序项目。 可复现代码：
<template>
<view class="page">
<view class="desgin-area">
<view
class="transparent"
id="leafer"
@touchstart="receiveEventStart"
@touchmove="receiveEvent"
@touchend="receiveEvent"
@touchcancel="receiveEvent"
>
<canvas id="leafer-tree" type="2d"></canvas>
<canvas id="leafer-sky" type="2d"></canvas>
</view>
</view>
<view>
<button @tap="handleRepeat">背景图repeat，手指不断调整小花大小会内存溢出</button>
<button @tap="handleSingle">背景图normal，手指不断调整小花大小会内存溢出</button>
<button @tap="handleColor">背景纯色，手指不断调整小花大小会内存溢出</button>
</view>
</view>
</template>
<script>
import {App, Frame, Image} from "@leafer-ui/miniapp";
import "@leafer-in/editor"; // 导入图形编辑器插件 //
import "@leafer-in/export";
import "@leafer-in/viewport";
let background = null
let app = null
let mater = null
export default {
data() {
return {
url1: 'https://www.rp66.cn/orange-oss/user-100000/wallpaper/role/girl/tmp_6a84b1f3612bb882a56cd224f0d481d2-1747047970305-423425032.png',
url2: 'https://www.rp66.cn/orange-oss/user-100000/background/repeat/animation/tmp_368e231dc8abe24c6d7fbdb7728bc90e-1746530155915-494161459.png',
url3: 'https://www.rp66.cn/orange-oss/user-100000/material/stickers/plant/tmp_c3da6b74315267d448f014a03eadac28-1746704111477-21264419.png'
};
},
onLoad() {
setTimeout(() => {
app = new App({
view: "leafer",
mobile: true,
tree: { canvas: "leafer-tree", type: "viewport" },
sky: { canvas: "leafer-sky" },
editor: {}
});
background = new Frame({
draggable: true,
name: "frame-wrap",
width: 2000,
height: 2000,
scale: 0.2,
overflow: "hide",
fill: {
type: "solid",
color: "#ffffff",
},
});
app.tree.add(background);
}, 100)
},
methods: {
receiveEvent(event) {
app.receiveEvent(event);
},
receiveEventStart(event) {
console.log("event", event);
app.receiveEvent(event);
},
// 背景图repeat，手指不断调整小花大小会内存溢出
handleRepeat() {
background.fill.type = "image";
background.fill.url = this.url2;
background.fill.mode = 'repeat';
background.forceUpdate();
this.handleMater()
},
// 背景图normal，手指不断调整小花大小会内存溢出
handleSingle() {
background.fill.type = "image";
background.fill.url = this.url1;
background.fill.mode = 'cover';
this.handleMater()
},
// 背景纯色，手指不断调整小花大小不会内存溢出
handleColor() {
background.fill.type = "solid";
background.fill.color = "green";
background.forceUpdate();
this.handleMater()
},
handleMater() {
if (mater) {
mater.remove()
}
mater = new Image({
url: this.url3,
width: 300,
draggable: true,
editable: true
});
background.add(mater);
}
},
};
</script>
<style scoped lang="less">
.page {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
background-color: #3f536e;
}
#leafer {
width: 100%;
height: 100%;
height: 60vh;
position: relative;
background-color: white;
border-radius: 10rpx;
transition: all 0.3s;
transform: scale(1);
transform-origin: top center;
}
#leafer-tree {
position: absolute;
width: 100%;
height: 100%;
}
#leafer-sky {
position: absolute;
width: 100%;
height: 100%;
}
button {
font-size: 32rpx;
margin-top: 20rpx;
height: 80rpx;
line-height: 80rpx;
}
</style>
这个是小程序的bug, 给图片创建了pattern填充之后不会自动回收，把引用都清空了也不回自动回收😂。
目前的解决办法：频繁修改大小的图片，可以用Rect图案填充渲染图像，给图案填充增加一个 changeful 参数，可以防止创建高性能 pattern。
https://www.leaferjs.com/ui/reference/UI/paint/image.html#changeful-boolean
我们会给小程序官方提一下bug, 再看看有没有其他办法解决。
请问现在这个问题有解决方案了吗？现在苹果机型，只要拖动图片元素10几秒内存就崩溃了，改用Rect填充图片，增加了changeful参数效果并没有改善，还是10秒左右崩溃，另外我使用taro框架开发过一款小程序相同机型并没有出现内存溢出这个问题，但是使用uni-app后出现这个问题。望解决。
