画布双击添加内部图片

This commit is contained in:
李志鹏
2025-11-11 10:13:59 +08:00
parent 4365b810db
commit 5f3c4b5ac9
4 changed files with 49 additions and 21 deletions

View File

@@ -2595,7 +2595,7 @@ export class CreateImageLayerCommand extends Command {
// 生成图层名称
const fileName =
this.layerName || `图片 ${new Date().toLocaleTimeString()}`;
this.layerName || `${new Date().toLocaleString()}`;
this.fabricImage.set({
id: this.imageId,

View File

@@ -58,11 +58,15 @@
</div>
<div class="btn" @click="clickflipHorizontal(v)">
<i class="iconfont icon-flip-horizontal"></i>
<p class="tip">{{ t('Canvas.flipHorizontal') }}</p>
<p class="tip">
{{ t("Canvas.flipHorizontal") }}
</p>
</div>
<div class="btn" @click="clickflipVertical(v)">
<i class="iconfont icon-flip-vertical"></i>
<p class="tip">{{ t('Canvas.flipVertical') }}</p>
<p class="tip">
{{ t("Canvas.flipVertical") }}
</p>
</div>
</div>
</div>
@@ -225,16 +229,22 @@
const initialState = TransformCommand.captureTransformState(obj);
const finalState = { ...initialState };
const angle = e.target.value;
const { x, y } = calculateRotatedTopLeftDeg(
obj.width * obj.scaleX,
obj.height * obj.scaleY,
obj.left,
obj.top,
obj.angle,
angle
);
finalState.left = x;
finalState.top = y;
if (obj.originX === "left" && obj.originY === "top") {
const width = obj.width * obj.scaleX;
const height = obj.height * obj.scaleY;
const left = obj.left;
const top = obj.top;
const { x, y } = calculateRotatedTopLeftDeg(
width,
height,
left,
top,
obj.angle,
angle
);
finalState.left = x;
finalState.top = y;
}
finalState.angle = angle;
transformObject(obj, initialState, finalState);
};
@@ -257,7 +267,12 @@
arrs.forEach((v) => {
activeObjects.value.forEach((item) => {
if (item.id === v.id) {
keys.forEach((key) => (item[key] = v[key]));
keys.forEach((k) => {
item[k] =
typeof v[k] === "number"
? Number(v[k].toFixed(3))
: v[k];
});
}
});
activeObjects.value = [...activeObjects.value];
@@ -271,7 +286,6 @@
} else {
arrs.push(e.target);
}
console.log(e.target);
updateActiveObjects(arrs, ["angle"]);
};

View File

@@ -44,16 +44,17 @@
:key="index"
class="image-item"
@click="handleImageClick(item)"
@dblclick="handleImageDoubleClick(item)"
>
<div class="image-wrapper">
<img
:src="item.url"
:alt="item.name || '图片'"
:alt="item.name"
@error="handleImageError"
loading="lazy"
/>
<div class="image-overlay">
<span class="image-name">{{ item.name || "未命名" }}</span>
<span class="image-name">{{ item.name }}</span>
</div>
</div>
<!-- <div class="image-select" v-show="selectList.includes(item.url)">
@@ -169,7 +170,11 @@ const handleImageClick = (item) => {
selectList.value.push(item.url)
}
};
// 处理图片双击
const handleImageDoubleClick = (item) => {
selectList.value = [item.url];
confirm();
}
// 处理图片加载错误
const handleImageError = (event) => {
event.target.src =