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