Merge branch 'StableVersion' of http://18.167.251.121:10003/aidlab/aida_front into dev_vite
This commit is contained in:
@@ -55,6 +55,7 @@ commandManager.setChangeCallback((info) => {
|
|||||||
emit("undo-redo-status-changed", {
|
emit("undo-redo-status-changed", {
|
||||||
canUndo: canUndo.value,
|
canUndo: canUndo.value,
|
||||||
canRedo: canRedo.value,
|
canRedo: canRedo.value,
|
||||||
|
type: info.type,
|
||||||
commandManager,
|
commandManager,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -907,7 +907,8 @@
|
|||||||
}
|
}
|
||||||
emit("changeCanvas", commandData)
|
emit("changeCanvas", commandData)
|
||||||
canvasManager.changeCanvas()
|
canvasManager.changeCanvas()
|
||||||
if ((command.canUndo || command.canRedo) && props.enabledRedGreenMode) {
|
const type = command.type
|
||||||
|
if (props.enabledRedGreenMode && (type === "undo" || type === "redo")) {
|
||||||
setTimeout(async () => {
|
setTimeout(async () => {
|
||||||
try {
|
try {
|
||||||
const imageData = await canvasManager.exportImage({
|
const imageData = await canvasManager.exportImage({
|
||||||
@@ -1057,7 +1058,10 @@
|
|||||||
} = {}) => {
|
} = {}) => {
|
||||||
loading.value = true
|
loading.value = true
|
||||||
canvasManager?.canvas?.discardActiveObject()
|
canvasManager?.canvas?.discardActiveObject()
|
||||||
if(isFrontBackUpdata)await canvasManager?.changeCanvas()
|
if (isFrontBackUpdata) {
|
||||||
|
await canvasManager?.setSpecialCliptInfo(true, true)
|
||||||
|
canvasManager.canvas.renderAll()
|
||||||
|
}
|
||||||
var base64 = await canvasManager.exportImage({
|
var base64 = await canvasManager.exportImage({
|
||||||
isContainBg,
|
isContainBg,
|
||||||
isContainFixed,
|
isContainFixed,
|
||||||
|
|||||||
@@ -623,17 +623,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
|
|||||||
this.updateMaskPosition(backgroundObject);
|
this.updateMaskPosition(backgroundObject);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 更新颜色层信息
|
this.setSpecialCliptInfo(false, true)
|
||||||
// const colorObject = this.getLayerObjectById(SpecialLayerId.COLOR);
|
|
||||||
// if(colorObject){
|
|
||||||
// await this.setObjecCliptInfo(colorObject);
|
|
||||||
// }
|
|
||||||
const groupLayer = this.layerManager.getLayerById(SpecialLayerId.SPECIAL_GROUP);
|
|
||||||
if(groupLayer){
|
|
||||||
const groupRect = new fabric.Rect({});
|
|
||||||
await this.setObjecCliptInfo(groupRect);
|
|
||||||
groupLayer.clippingMask = groupRect.toObject();
|
|
||||||
}
|
|
||||||
|
|
||||||
// 重新渲染画布
|
// 重新渲染画布
|
||||||
this.canvas.renderAll();
|
this.canvas.renderAll();
|
||||||
@@ -1556,6 +1546,26 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
|
|||||||
this.awaitCanvasRun = null;
|
this.awaitCanvasRun = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//设置印花元素颜色的裁剪信息
|
||||||
|
async setSpecialCliptInfo(isColor = true, isGroup = true) {
|
||||||
|
// 更新颜色层信息
|
||||||
|
if (isColor) {
|
||||||
|
const colorObject = this.getLayerObjectById(SpecialLayerId.COLOR);
|
||||||
|
if (colorObject) {
|
||||||
|
await this.setObjecCliptInfo(colorObject);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
// 更新特殊组图层信息
|
||||||
|
if (isGroup) {
|
||||||
|
const groupLayer = this.layerManager.getLayerById(SpecialLayerId.SPECIAL_GROUP);
|
||||||
|
if (groupLayer) {
|
||||||
|
const groupRect = new fabric.Rect({});
|
||||||
|
await this.setObjecCliptInfo(groupRect);
|
||||||
|
groupLayer.clippingMask = groupRect.toObject();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
// 设置画布对象的裁剪信息
|
// 设置画布对象的裁剪信息
|
||||||
async setObjecCliptInfo(tagObject, data) {
|
async setObjecCliptInfo(tagObject, data) {
|
||||||
const fixedLayerObj = this.getFixedLayerObject();
|
const fixedLayerObj = this.getFixedLayerObject();
|
||||||
|
|||||||
@@ -606,7 +606,9 @@ export class ExportManager {
|
|||||||
imageSmoothingEnabled: true,
|
imageSmoothingEnabled: true,
|
||||||
});
|
});
|
||||||
// tempFabricCanvas.setZoom(1);
|
// tempFabricCanvas.setZoom(1);
|
||||||
console.log("==========", fixedLayerObject)
|
const ox = fixedLayerObject.left - fixedLayerObject.width * fixedLayerObject.scaleX / 2
|
||||||
|
const oy = fixedLayerObject.top - fixedLayerObject.height * fixedLayerObject.scaleY / 2
|
||||||
|
// console.log("==========", fixedLayerObject, ox, oy)
|
||||||
try {
|
try {
|
||||||
// 克隆并添加所有对象到临时画布,需要调整位置相对于固定图层
|
// 克隆并添加所有对象到临时画布,需要调整位置相对于固定图层
|
||||||
for (let i = 0; i < objectsToExport.length; i++) {
|
for (let i = 0; i < objectsToExport.length; i++) {
|
||||||
@@ -616,15 +618,16 @@ export class ExportManager {
|
|||||||
restoreOpacityInRedGreen && true
|
restoreOpacityInRedGreen && true
|
||||||
);
|
);
|
||||||
if (cloned) {
|
if (cloned) {
|
||||||
|
let scaleX = cloned.scaleX / fixedLayerObject.scaleX
|
||||||
|
let scaleY = cloned.scaleY / fixedLayerObject.scaleY
|
||||||
|
let top = (cloned.top - oy) * scaleY
|
||||||
|
let left = (cloned.left - ox) * scaleX
|
||||||
cloned.set({
|
cloned.set({
|
||||||
left: canvasWidth / 2,
|
left: left,
|
||||||
top: canvasHeight / 2,
|
top: top,
|
||||||
scaleX: cloned.scaleX / fixedLayerObject.scaleX,
|
scaleX: scaleX,
|
||||||
scaleY: cloned.scaleY / fixedLayerObject.scaleY,
|
scaleY: scaleY,
|
||||||
originX: "center",
|
|
||||||
originY: "center",
|
|
||||||
});
|
});
|
||||||
console.log("==========", {...cloned})
|
|
||||||
// 更新对象坐标
|
// 更新对象坐标
|
||||||
cloned.setCoords();
|
cloned.setCoords();
|
||||||
tempFabricCanvas.add(cloned);
|
tempFabricCanvas.add(cloned);
|
||||||
|
|||||||
@@ -180,7 +180,7 @@ export class CommandManager {
|
|||||||
this._recordPerformance("execute", command.constructor.name, duration);
|
this._recordPerformance("execute", command.constructor.name, duration);
|
||||||
|
|
||||||
// 通知状态变化
|
// 通知状态变化
|
||||||
this._notifyStateChange();
|
this._notifyStateChange("execute");
|
||||||
|
|
||||||
console.log(`✅ 命令执行成功: ${command.constructor.name}`);
|
console.log(`✅ 命令执行成功: ${command.constructor.name}`);
|
||||||
return result;
|
return result;
|
||||||
@@ -219,7 +219,7 @@ export class CommandManager {
|
|||||||
this._recordPerformance("undo", command.constructor.name, duration);
|
this._recordPerformance("undo", command.constructor.name, duration);
|
||||||
|
|
||||||
// 通知状态变化
|
// 通知状态变化
|
||||||
this._notifyStateChange();
|
this._notifyStateChange("undo");
|
||||||
|
|
||||||
console.log(`✅ 命令撤销成功: ${command.constructor.name}`);
|
console.log(`✅ 命令撤销成功: ${command.constructor.name}`);
|
||||||
return result;
|
return result;
|
||||||
@@ -258,7 +258,7 @@ export class CommandManager {
|
|||||||
this._recordPerformance("redo", command.constructor.name, duration);
|
this._recordPerformance("redo", command.constructor.name, duration);
|
||||||
|
|
||||||
// 通知状态变化
|
// 通知状态变化
|
||||||
this._notifyStateChange();
|
this._notifyStateChange("redo");
|
||||||
|
|
||||||
console.log(`✅ 命令重做成功: ${command.constructor.name}`);
|
console.log(`✅ 命令重做成功: ${command.constructor.name}`);
|
||||||
return result;
|
return result;
|
||||||
@@ -298,7 +298,7 @@ export class CommandManager {
|
|||||||
|
|
||||||
this.undoStack = [];
|
this.undoStack = [];
|
||||||
this.redoStack = [];
|
this.redoStack = [];
|
||||||
this._notifyStateChange();
|
this._notifyStateChange("clear");
|
||||||
// console.log("📝 命令历史已清空");
|
// console.log("📝 命令历史已清空");
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -417,10 +417,12 @@ export class CommandManager {
|
|||||||
* 通知状态变化
|
* 通知状态变化
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
_notifyStateChange() {
|
_notifyStateChange(type) {
|
||||||
if (this.onStateChange) {
|
if (this.onStateChange) {
|
||||||
try {
|
try {
|
||||||
this.onStateChange(this.getState());
|
const obj = this.getState();
|
||||||
|
obj.type = type;
|
||||||
|
this.onStateChange(obj);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("状态变化回调执行失败:", error);
|
console.error("状态变化回调执行失败:", error);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -85,7 +85,7 @@ export class LiquifyRealTimeUpdater {
|
|||||||
|
|
||||||
if (isDrawing && this.config.useDirectUpdate) {
|
if (isDrawing && this.config.useDirectUpdate) {
|
||||||
// 拖拽过程中使用快速更新(降低质量以提高性能)
|
// 拖拽过程中使用快速更新(降低质量以提高性能)
|
||||||
this._fastUpdate(imageData);
|
await this._fastUpdate(imageData);
|
||||||
} else {
|
} else {
|
||||||
// 拖拽结束后使用完整更新(最高质量)
|
// 拖拽结束后使用完整更新(最高质量)
|
||||||
await this._fullUpdate(imageData);
|
await this._fullUpdate(imageData);
|
||||||
@@ -124,7 +124,7 @@ export class LiquifyRealTimeUpdater {
|
|||||||
* @param {ImageData} imageData 图像数据
|
* @param {ImageData} imageData 图像数据
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
_fastUpdate(imageData) {
|
async _fastUpdate(imageData) {
|
||||||
if (!this.targetObject || !this.targetObject._element) {
|
if (!this.targetObject || !this.targetObject._element) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -138,12 +138,14 @@ export class LiquifyRealTimeUpdater {
|
|||||||
|
|
||||||
// 直接更新fabric对象的图像源(使用PNG格式保持质量)
|
// 直接更新fabric对象的图像源(使用PNG格式保持质量)
|
||||||
const targetElement = this.targetObject._element;
|
const targetElement = this.targetObject._element;
|
||||||
|
|
||||||
// 方案1: 直接设置src属性(最高性能)
|
// 方案1: 直接设置src属性(最高性能)
|
||||||
const dataURL = this.tempCanvas.toDataURL("image/png", quality);
|
const dataURL = this.tempCanvas.toDataURL("image/png", quality);
|
||||||
|
|
||||||
if (targetElement.src !== dataURL) {
|
if (targetElement.src !== dataURL) {
|
||||||
targetElement.src = dataURL;
|
// targetElement.src = dataURL;
|
||||||
|
const image = new Image();
|
||||||
|
image.src = dataURL;
|
||||||
|
await image.decode();
|
||||||
|
this.targetObject.setElement(image);
|
||||||
|
|
||||||
// 关键优化:直接设置fabric对象为脏状态,但不立即渲染
|
// 关键优化:直接设置fabric对象为脏状态,但不立即渲染
|
||||||
// this.targetObject.dirty = false; // 标记为不需要立即渲染
|
// this.targetObject.dirty = false; // 标记为不需要立即渲染
|
||||||
|
|||||||
@@ -447,6 +447,7 @@
|
|||||||
</template>
|
</template>
|
||||||
</CanvasEditor>
|
</CanvasEditor>
|
||||||
</div>
|
</div>
|
||||||
|
<img src="" alt="" id="canvas-test-dom">
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<style>
|
<style>
|
||||||
@@ -458,6 +459,13 @@
|
|||||||
height: 600px !important;
|
height: 600px !important;
|
||||||
z-index: 99999999;
|
z-index: 99999999;
|
||||||
}
|
}
|
||||||
|
#canvas-test-dom{
|
||||||
|
position: fixed;
|
||||||
|
z-index: 9999999999;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
* {
|
* {
|
||||||
|
|||||||
@@ -247,6 +247,7 @@ export default defineComponent({
|
|||||||
let front = detailData.frontBack.front[detailData.imgDomIndex]
|
let front = detailData.frontBack.front[detailData.imgDomIndex]
|
||||||
let back = detailData.frontBack.back[detailData.imgDomIndex]
|
let back = detailData.frontBack.back[detailData.imgDomIndex]
|
||||||
store.commit('DesignDetail/updataDetailItem',{maskUrl:value})
|
store.commit('DesignDetail/updataDetailItem',{maskUrl:value})
|
||||||
|
await nextTick()
|
||||||
if(!detailData.selectDetail.partialDesign.partialDesignPath && !detailData.selectDetail.partialDesign.partialDesignBase64){
|
if(!detailData.selectDetail.partialDesign.partialDesignPath && !detailData.selectDetail.partialDesign.partialDesignBase64){
|
||||||
await privewDetail()
|
await privewDetail()
|
||||||
}else{
|
}else{
|
||||||
|
|||||||
@@ -77,17 +77,8 @@ export default defineComponent({
|
|||||||
left: 50%;
|
left: 50%;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translate(-50%,-50%);
|
transform: translate(-50%,-50%);
|
||||||
// width: 80%;
|
|
||||||
// height: auto;
|
|
||||||
// max-height: 80vh;
|
|
||||||
// width: max-content;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
video{
|
video{
|
||||||
// width: 100%;
|
|
||||||
// max-height: 80vh;
|
|
||||||
// height: 100%;
|
|
||||||
// object-fit: contain;
|
|
||||||
// width: max-content;
|
|
||||||
max-height:80vh;
|
max-height:80vh;
|
||||||
max-width:80vw;
|
max-width:80vw;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -41,10 +41,10 @@
|
|||||||
<div class="center">{{ selectObject?.styleName?selectObject?.styleName:$t('Header.All') }}</div>
|
<div class="center">{{ selectObject?.styleName?selectObject?.styleName:$t('Header.All') }}</div>
|
||||||
<div class="gallery_btn" @click="setStyle">{{ $t('Habit.Select') }}</div>
|
<div class="gallery_btn" @click="setStyle">{{ $t('Habit.Select') }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="style brand marginBottom">
|
<!-- <div class="style brand marginBottom">
|
||||||
<div class="text">{{$t('Habit.Brand')}}:</div>
|
<div class="text">{{$t('Habit.Brand')}}:</div>
|
||||||
<div class="gallery_btn" @click="setBrandDNA">{{ $t('Habit.Select') }}</div>
|
<div class="gallery_btn" @click="setBrandDNA">{{ $t('Habit.Select') }}</div>
|
||||||
</div>
|
</div> -->
|
||||||
<div class="brandImg" v-if="selectObject.userBrandDna"><img :src="selectObject.userBrandDnaImg"></div>
|
<div class="brandImg" v-if="selectObject.userBrandDna"><img :src="selectObject.userBrandDnaImg"></div>
|
||||||
<div class="brandDNAStrenght marginBottom" v-if="selectObject.userBrandDna">
|
<div class="brandDNAStrenght marginBottom" v-if="selectObject.userBrandDna">
|
||||||
<div class="text" style="font-size: 1.6rem;">
|
<div class="text" style="font-size: 1.6rem;">
|
||||||
|
|||||||
@@ -340,12 +340,12 @@ const navTypeList = (t)=>{
|
|||||||
value:'Models',
|
value:'Models',
|
||||||
router:'library=Models'
|
router:'library=Models'
|
||||||
},
|
},
|
||||||
{
|
// {
|
||||||
icon:'fi-ss-gem',
|
// icon:'fi-ss-gem',
|
||||||
label:t('LibraryPage.brandDNA'),
|
// label:t('LibraryPage.brandDNA'),
|
||||||
value:'MyBrand',
|
// value:'MyBrand',
|
||||||
router:'library=MyBrand'
|
// router:'library=MyBrand'
|
||||||
},
|
// },
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
// history:{
|
// history:{
|
||||||
|
|||||||
Reference in New Issue
Block a user