leaferjs 刷新后，第一次hover动画时背景图短暂模糊

我正在使用leaferjs 开发一个图片标注工具，基本逻辑就是任意一张图片作为底稿，然后实现对图片就行标注；如图所示：

其中有一个需求是用户鼠标hover在标注元素上时候，需要放大一些这个标注，现在发现页面刷新后，第一次hover动画时背景图短暂模糊，第一次以后就不会有这个问题了，如图所示：

第一次hover动画模糊截图，可以很明显的看到图明显很模糊

对比不模糊时

以下是关键部分代码样稿图加载代码：

arduino 复制代码

const app = appInst.value;

const { designDraftGroupKey, designDraftRectKey } = curConfig.value;

const designDraftGroup = new Group({
    id: `${designDraftGroupKey}`,

});
app.add(designDraftGroup);
const { width: ow, height: oh } = getPictureSize();

// 样稿图
const designDraftRect = new Rect({
    id: `${designDraftRectKey}`,
    x: 0,
    y: 0,

    width: ow,
    height: oh,
    stroke: props.debuggerMode ? 'red' : null,
    fill: {
        type: 'image',
        url: props.url, 
        mode: 'stretch' // 拉伸填充
    },
    draggable: false // 允许拖动
});
designDraftGroup.add(designDraftRect);
designDraftRectEl.value = designDraftGroup;

创建标注代码

javascript 复制代码

const textDom = new Text({
    tag: 'Text',
    id: `${labelItem.key}_${textContentKey}`,
    text: textBoxParams.text,
    fill: mainColor,
    padding: [10, 20],
    textAlign: 'left',
    verticalAlign: 'top',
});
// 文本框  相关
const textBox = new Box({
    x: textBoxParams?.x ?? 0,
    y: textBoxParams?.y ?? 0,
    id: `${labelItem.key}_${textBoxKey}`,
    className: `${textBoxKey}`,
    fill: '#fff',
    draggable: true,
    cornerRadius: 5,
    stroke: mainColor, // 设置边框颜色
    strokeWidth: 2, // 设置边框宽度
    zIndex: 1,
    origin: 'center',
    // 默认不显示 等
    visible: false,
    cursor: 'pointer',
    children: [
        textDom
    ]
});

app.add(textBox);

绑定hover动画代码： textBoxEl是文本框、targetEl 是图片对应区域、lineEl 是连接线

scss 复制代码

// 绑定 hover动画
const buildEnterAnimate = () => {
    if (draging) {
        return;
    }
    const { textBoxEl, targetEl, lineEl, textContentEl } = queryDataItemElement(labelItem);
    textBoxEl?.animate({ scale: getBaseScale(labelItem?.textBoxParams?.scale || 0) + getBaseScale(1.1), }, animateParams);
    lineEl?.animate({ strokeWidth: 4 * getBaseScale(textBoxParams?.scale || 1), opacity: 1 }, animateParams);
    targetEl?.animate({ strokeWidth: 4 * getBaseScale(textBoxParams?.scale || 1), fill: labelItem.color, opacity: 0.7 }, animateParams);
    setActiveLabelElement(labelItem);
}
const buildLeaveAnimate = () => {
    const { textBoxEl, targetEl, lineEl, textContentEl } = queryDataItemElement(labelItem);
    textBoxEl?.animate({ scale: getBaseScale(labelItem?.textBoxParams?.scale || 1), }, animateParams);
    lineEl?.animate({ strokeWidth: 2 * getBaseScale(textBoxParams?.scale || 1), opacity: 0.7 }, animateParams);


    if (isFocusViewMode.value) {
        targetEl?.animate({ strokeWidth: 2 * getBaseScale(textBoxParams?.scale || 1), opacity: 0.7 }, animateParams);
    } else {
        targetEl?.animate({ strokeWidth: 2 * getBaseScale(textBoxParams?.scale || 1), fill: null, opacity: 0.7 }, animateParams);
    }
}

const { textBoxEl, targetEl, lineEl, textContentEl } = queryDataItemElement(labelItem);
textBoxEl.on(PointerEvent.ENTER, buildEnterAnimate);
textBoxEl.on(PointerEvent.LEAVE, buildLeaveAnimate);

targetEl?.on(PointerEvent.ENTER, buildEnterAnimate);
targetEl?.on(PointerEvent.LEAVE, buildLeaveAnimate);

lineEl?.on(PointerEvent.ENTER, buildEnterAnimate);
lineEl?.on(PointerEvent.LEAVE, buildLeaveAnimate);

有没有人知道原因呢？求解答