Compare commits
12 Commits
research
...
7c14b1d831
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
7c14b1d831 | ||
|
|
8966b52430 | ||
|
|
5fa049f73d | ||
|
|
575445f767 | ||
|
|
f43c56236b | ||
|
|
4352f7c2f4 | ||
|
|
c6b1bdbdf1 | ||
|
|
f16aa6ea14 | ||
|
|
a25abeb527 | ||
|
|
d359cd7763 | ||
| 23085d9a9b | |||
|
|
35c6dfe29c |
@@ -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({
|
||||
@@ -1040,6 +1041,7 @@
|
||||
},
|
||||
// 导出图片
|
||||
exportImage: async ({
|
||||
isFrontBackUpdata = false, // 更新红绿图时候需要用,直接更新红绿图
|
||||
isContainBg = false, // 是否包含背景图层
|
||||
isContainFixed = false, // 是否包含固定图层
|
||||
isContainFixedOther = true, // 是否包含其他固定图层--颜色图层
|
||||
@@ -1056,6 +1058,10 @@
|
||||
} = {}) => {
|
||||
loading.value = true
|
||||
canvasManager?.canvas?.discardActiveObject()
|
||||
if (isFrontBackUpdata) {
|
||||
await canvasManager?.setSpecialCliptInfo(true, true)
|
||||
canvasManager.canvas.renderAll()
|
||||
}
|
||||
var base64 = await canvasManager.exportImage({
|
||||
isContainBg,
|
||||
isContainFixed,
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -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">
|
||||
* {
|
||||
|
||||
@@ -163,7 +163,6 @@ export default defineComponent({
|
||||
const privewDetail = async (oldSelectDetail = detailData.selectDetail)=>{
|
||||
// if(!detailDom.editCanvas)return
|
||||
return new Promise(async (res,reject)=>{
|
||||
console.log(detailDom.editCanvas)
|
||||
await detailDom.editCanvas.exportImage({
|
||||
isContainFixed:true,
|
||||
width:props.sketchSize.width,
|
||||
@@ -245,17 +244,27 @@ export default defineComponent({
|
||||
|
||||
|
||||
const frontBackChange = async (value:any)=>{
|
||||
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{
|
||||
await detailDom.editCanvas.exportImage({
|
||||
isFrontBackUpdata: true,
|
||||
isContainFixed:true,
|
||||
width:props.sketchSize.width,
|
||||
height:props.sketchSize.height,
|
||||
}).then((rv)=>{
|
||||
if(detailData.selectDetail?.partialDesign)detailData.selectDetail.partialDesign.partialDesignBase64 = rv
|
||||
})
|
||||
}
|
||||
let full = detailData.selectDetail.partialDesign.partialDesignBase64 || detailData.selectDetail.partialDesign.partialDesignPath || detailData.selectDetail.path
|
||||
let size = {
|
||||
...detailData.canvasConfig,
|
||||
}
|
||||
store.commit('DesignDetail/updataDetailItem',{maskUrl:value})
|
||||
segmentImage(value,full,size).then(async (rv)=>{
|
||||
let front = detailData.frontBack.front[detailData.imgDomIndex]
|
||||
let back = detailData.frontBack.back[detailData.imgDomIndex]
|
||||
if(!front?.oldImageUrl)front.oldImageUrl = front.imageUrl
|
||||
if(!front?.oldMaskUrl)front.oldMaskUrl = front.maskUrl
|
||||
if(!back?.oldImageUrl)back.oldImageUrl = back.imageUrl
|
||||
@@ -267,7 +276,6 @@ export default defineComponent({
|
||||
back.imageUrl = rv.targetBackUrl
|
||||
// store.commit('DesignDetail/updataDetailItem',{maskUrl:value})
|
||||
})
|
||||
|
||||
}
|
||||
const editSketchCanvasInit = async (value:any)=>{
|
||||
detailData.canvasInstance = value
|
||||
|
||||
@@ -393,8 +393,8 @@ export default defineComponent({
|
||||
angle: 0,
|
||||
flipX: false,
|
||||
flipY: false,
|
||||
// blendMode: "multiply",
|
||||
blendMode: "source-over",
|
||||
blendMode: "multiply",
|
||||
// blendMode: "source-over",
|
||||
gapX: 0,
|
||||
gapY: 0,
|
||||
}
|
||||
|
||||
@@ -531,7 +531,7 @@ export default defineComponent({
|
||||
}
|
||||
)
|
||||
const setSpeed = (item: any) => {
|
||||
speed.speedData = item
|
||||
speed.speedData = {...item}
|
||||
}
|
||||
onMounted(() => {
|
||||
if (props.msg == 'Sketchboard') {
|
||||
|
||||
@@ -205,7 +205,7 @@
|
||||
</div>
|
||||
<div class="payment">
|
||||
<div class="allocation">
|
||||
<div class="selectType">
|
||||
<!-- <div class="selectType">
|
||||
<div class="text">{{ $t('Renew.Payment') }}:</div>
|
||||
<label>
|
||||
<input
|
||||
@@ -227,7 +227,7 @@
|
||||
/>
|
||||
{{ $t('Renew.Alipay') }}
|
||||
</label>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="gallery_btn gallery_btn_radius" @click="payment">
|
||||
{{ $t('upgradePlan.Continue') }}
|
||||
|
||||
@@ -77,17 +77,10 @@ export default defineComponent({
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
width: 80%;
|
||||
height: auto;
|
||||
max-height: 80vh;
|
||||
position: absolute;
|
||||
width: max-content;
|
||||
video{
|
||||
width: 100%;
|
||||
max-height: 80vh;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
width: max-content;
|
||||
max-height:80vh;
|
||||
max-width:80vw;
|
||||
}
|
||||
.general_video_btn{
|
||||
color: #fff;
|
||||
|
||||
@@ -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