This commit is contained in:
wxd
2024-10-13 22:20:59 +08:00
parent 82060d24b1
commit 935d69ac42
3 changed files with 21 additions and 10 deletions

View File

@@ -65,7 +65,7 @@
</div> </div>
</div> </div>
<div <div
v-if="key != 'moodboardPosition'" v-if="key != 'moodboardPosition' && key != 'colorBoards'"
class="exportCanvasBox_item" class="exportCanvasBox_item"
v-for="imgItem in item" v-for="imgItem in item"
:class="[key == 'disposeMoodboard'?'exportCanvasBox_item_dispose':'',imgItem?.upScaleChecked?'active':'']" :class="[key == 'disposeMoodboard'?'exportCanvasBox_item_dispose':'',imgItem?.upScaleChecked?'active':'']"
@@ -2394,7 +2394,7 @@ export default defineComponent({
margin-bottom: 2rem; margin-bottom: 2rem;
img { img {
max-width: 7rem; max-width: 7rem;
max-height: 7rem; max-height: 14rem;
object-fit: contain; object-fit: contain;
} }

View File

@@ -41,6 +41,7 @@
<span style="text-align: center;">{{ $t('Generate.referenceImage') }}</span> <span style="text-align: center;">{{ $t('Generate.referenceImage') }}</span>
</template> </template>
<span v-if="item.label">{{ item.label }}</span> <span v-if="item.label">{{ item.label }}</span>
<span v-else>{{ item.name }}</span> <span v-else>{{ item.name }}</span>
</a-popover> </a-popover>
@@ -187,7 +188,7 @@ import { message, Upload, Modal } from "ant-design-vue";
} }
}); });
</script> </script>
<style> <style lang="less">
.ant-popover-inner-content{ .ant-popover-inner-content{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -229,6 +230,10 @@ import { message, Upload, Modal } from "ant-design-vue";
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
padding: 0 calc(1rem*1.2); padding: 0 calc(1rem*1.2);
span{
display: block;
width: 100%;
}
&.active{ &.active{
// opacity: .4; // opacity: .4;
pointer-events: none; pointer-events: none;

View File

@@ -27,7 +27,7 @@
</div> --> </div> -->
<i class="icon iconfont icon-chehui" @click="historyState('')"></i> <i class="icon iconfont icon-chehui" @click="historyState('')"></i>
<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i> <i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
<i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:canvasState == 'move'}"></i> <!-- <i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:canvasState == 'move'}"></i> -->
<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasState == 'pencil'}"></i> <i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasState == 'pencil'}"></i>
<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasState == 'eraser'}"></i> <i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasState == 'eraser'}"></i>
<!-- <i class="icon iconfont icon-IC-yehua" @click="setOperation('liquidation')"></i> --> <!-- <i class="icon iconfont icon-IC-yehua" @click="setOperation('liquidation')"></i> -->
@@ -177,6 +177,7 @@ export default defineComponent({
width:canvasWH.value * wScale, width:canvasWH.value * wScale,
height:canvasWH.value * hScale, height:canvasWH.value * hScale,
}) })
canvas.selection = false;
scale = img.height/canvas.height scale = img.height/canvas.height
pencilbtnStyle.value.background = canvasBtn.canvasPencilColor pencilbtnStyle.value.background = canvasBtn.canvasPencilColor
@@ -278,17 +279,23 @@ export default defineComponent({
} }
let setOperation = (str)=>{ let setOperation = (str)=>{
canvasBtn.canvasState = str canvasBtn.canvasState = str
let canvasCenterBox = document.querySelector(".generalMiniCanvas .exportCanvasBox_center_box");
let classList = canvasCenterBox.className.split(' ');
if(str == 'move'){ if(str == 'move'){
setMove() setMove()
pencilbtnStyle.value.display = `none` pencilbtnStyle.value.display = `none`
if(classList.indexOf('cursorNone')>-1) canvasCenterBox.classList.remove('cursorNone')
}else if(str == 'pencil'){ }else if(str == 'pencil'){
setPencil() setPencil()
pencilbtnStyle.value.display = `block` pencilbtnStyle.value.display = `block`
if(classList.indexOf('cursorNone') == -1) canvasCenterBox.classList.add('cursorNone')
}else if(str == 'eraser'){ }else if(str == 'eraser'){
setEraser() setEraser()
pencilbtnStyle.value.display = `block` pencilbtnStyle.value.display = `block`
if(classList.indexOf('cursorNone') == -1) canvasCenterBox.classList.add('cursorNone')
}else if(str == 'liquidation'){ }else if(str == 'liquidation'){
canvas.isDrawingMode = false canvas.isDrawingMode = false
if(classList.indexOf('cursorNone') == -1) canvasCenterBox.classList.add('cursorNone')
} }
} }
let setMove = ()=>{ let setMove = ()=>{
@@ -427,11 +434,9 @@ export default defineComponent({
) )
exportCanvas.add(obj) exportCanvas.add(obj)
}) })
console.log(canvas.toDataURL("image/png"));
let data = canvas.toDataURL({
format: 'png', let data = canvas.toDataURL("image/png");
quality: 1 // 质量参数,范围 0.0 - 1.0
});
if(liquefation){ if(liquefation){
return resolve(data) return resolve(data)
} }
@@ -635,7 +640,8 @@ export default defineComponent({
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
background: #e6e6e6; background: #e6e6e6;
&:hover{ cursor: inherit;
&.cursorNone:hover{
cursor: none; cursor: none;
} }
.editFrontBack_pencilbtn{ .editFrontBack_pencilbtn{