aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改删除图层按钮变为svg图

Browse Source
This commit is contained in:
X1627315083
2024-07-18 13:06:59 +08:00
parent 2d09f3dafc
commit db371f4b79
6 changed files with 16 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/assets/images/homePage/cuowu.svg Normal file
View File

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1721274904120" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10523" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 0c281.6 0 512 230.4 512 512s-230.4 512-512 512-512-230.4-512-512 230.4-512 512-512z m0 102.4C286.72 102.4 102.4 286.72 102.4 512c0 225.28 184.32 409.6 409.6 409.6 225.28 0 409.6-184.32 409.6-409.6 0-225.28-184.32-409.6-409.6-409.6zM332.8 332.8c20.48-20.48 51.2-20.48 71.68 0L512 440.32 619.52 332.8c20.48-20.48 51.2-20.48 71.68 0s20.48 51.2 0 71.68L583.68 512 691.2 619.52c20.48 20.48 20.48 51.2 0 71.68a49.493333 49.493333 0 0 1-71.68 0L512 583.68 404.48 691.2a49.493333 49.493333 0 0 1-71.68 0 49.493333 49.493333 0 0 1 0-71.68L440.32 512 332.8 404.48a49.493333 49.493333 0 0 1 0-71.68z" fill="#2c2c2c" p-id="10524"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 970 B

6
src/component/Detail/DesignElements.vue
View File

@@ -58,7 +58,7 @@
<li class="designElements_btn_right" @mousedown.stop="itemSizeMousedown('right',$event)"></li>
<li class="designElements_rotote" v-rotote.stop="[index,item.transform]"></li>
<li class="designElements_delete" @click="deletePrint">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAdBJREFUSImt1r1uU0EQBeDPFh1pgBQEEwFVAg9BROhCAh1FAg1gkMA8DA0oKOEB3IEIRQgF4SEQBIUC6ENSGgPFXaPx+udeSxxppPXOzJnZ8e7MrRmPWdzANZxPv+EbvmILL/G9hGcADayjgz8l0kUb56qSX8dhBeJcDrFSRv44ZRQdt3EPczieZB5NvB1ymta4zCP5J1yucOIFfM6CDJykob8s73GiAnkPJ7Eb/H9iJhpsZJlPQh6D7AWe9Z5iFr+CIpalhjWspnXZ/pXA01FURkv/HxpxK+g2UE+yGfZXM5+doHt4DEtB2R5dAXdD9nfG2LVxNa2XKGreiziXGefZ5rKZbCLmg/4jHIWNqSEZ1fC0IrnE0bM5qqdFGWoV92RBf/P/S3RRVqI3YaOZGd8eQpgHXMt8HgTd67qi5fZwMzOO5XuREmim9ShEji04q78tLwSDSR/aYuD599DgeVDsY3pMhqOQt4pnUXlGf7PbTQ5VcQofgv8BTudGK/rb9Z6it5RhEV+CX1cxYoeiZXDg7OC+4vpNJbmkuC3vMtsuHpVltKzo55OOzINxmeeYxhPVhn5H0ftnhhGNeu49NBSjdBkX9H+27Cvu+Sv8GEXwF9+O3b1zwZqdAAAAAElFTkSuQmCC" alt="">
<img src="../../assets/images/homePage/cuowu.svg" alt="">
</li>
</ul>
<div></div>
@@ -876,10 +876,10 @@ export default defineComponent({
position: absolute;
top: 0;
right: 0;
width: 4rem;
width: 2.5rem;
background: none;
transform: translate(100%, -100%);
height: 4rem;
height: 2.5rem;
img{
width: 100%;
height: 100%;

6
src/component/Detail/DesignElementsMobile.vue
View File

@@ -58,7 +58,7 @@
<li class="designElementsMobile_btn_right" @touchstart.stop="itemSizeMousedown('right',$event)"></li>
<li class="designElementsMobile_rotote" v-rotote.stop="[index,item.transform]"></li>
<li class="designElementsMobile_delete" @click="deletePrint">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAdBJREFUSImt1r1uU0EQBeDPFh1pgBQEEwFVAg9BROhCAh1FAg1gkMA8DA0oKOEB3IEIRQgF4SEQBIUC6ENSGgPFXaPx+udeSxxppPXOzJnZ8e7MrRmPWdzANZxPv+EbvmILL/G9hGcADayjgz8l0kUb56qSX8dhBeJcDrFSRv44ZRQdt3EPczieZB5NvB1ymta4zCP5J1yucOIFfM6CDJykob8s73GiAnkPJ7Eb/H9iJhpsZJlPQh6D7AWe9Z5iFr+CIpalhjWspnXZ/pXA01FURkv/HxpxK+g2UE+yGfZXM5+doHt4DEtB2R5dAXdD9nfG2LVxNa2XKGreiziXGefZ5rKZbCLmg/4jHIWNqSEZ1fC0IrnE0bM5qqdFGWoV92RBf/P/S3RRVqI3YaOZGd8eQpgHXMt8HgTd67qi5fZwMzOO5XuREmim9ShEji04q78tLwSDSR/aYuD599DgeVDsY3pMhqOQt4pnUXlGf7PbTQ5VcQofgv8BTudGK/rb9Z6it5RhEV+CX1cxYoeiZXDg7OC+4vpNJbmkuC3vMtsuHpVltKzo55OOzINxmeeYxhPVhn5H0ftnhhGNeu49NBSjdBkX9H+27Cvu+Sv8GEXwF9+O3b1zwZqdAAAAAElFTkSuQmCC" alt="">
<img src="../../assets/images/homePage/cuowu.svg" alt="">
</li>
</ul>
<div></div>
@@ -878,10 +878,10 @@ export default defineComponent({
position: absolute;
top: 0;
right: 0;
width: 4rem;
width: 2.5rem;
background: none;
transform: translate(100%, -100%);
height: 4rem;
height: 2.5rem;
img{
width: 100%;
height: 100%;

6
src/component/Detail/DesignPrintOperation.vue
View File

@@ -105,7 +105,7 @@
<li class="designOpenrtion_btn_right" @mousedown.stop="itemSizeMousedown('right',$event)"></li>
<li class="designOpenrtion_rotote" v-rotote.stop="[index,item.transform]"></li>
<li class="designOpenrtion_delete" @click.stop="deletePrint">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAdBJREFUSImt1r1uU0EQBeDPFh1pgBQEEwFVAg9BROhCAh1FAg1gkMA8DA0oKOEB3IEIRQgF4SEQBIUC6ENSGgPFXaPx+udeSxxppPXOzJnZ8e7MrRmPWdzANZxPv+EbvmILL/G9hGcADayjgz8l0kUb56qSX8dhBeJcDrFSRv44ZRQdt3EPczieZB5NvB1ymta4zCP5J1yucOIFfM6CDJykob8s73GiAnkPJ7Eb/H9iJhpsZJlPQh6D7AWe9Z5iFr+CIpalhjWspnXZ/pXA01FURkv/HxpxK+g2UE+yGfZXM5+doHt4DEtB2R5dAXdD9nfG2LVxNa2XKGreiziXGefZ5rKZbCLmg/4jHIWNqSEZ1fC0IrnE0bM5qqdFGWoV92RBf/P/S3RRVqI3YaOZGd8eQpgHXMt8HgTd67qi5fZwMzOO5XuREmim9ShEji04q78tLwSDSR/aYuD599DgeVDsY3pMhqOQt4pnUXlGf7PbTQ5VcQofgv8BTudGK/rb9Z6it5RhEV+CX1cxYoeiZXDg7OC+4vpNJbmkuC3vMtsuHpVltKzo55OOzINxmeeYxhPVhn5H0ftnhhGNeu49NBSjdBkX9H+27Cvu+Sv8GEXwF9+O3b1zwZqdAAAAAElFTkSuQmCC" alt="">
<img src="../../assets/images/homePage/cuowu.svg" alt="">
</li>
</ul>
<div v-show="!overallSingle"></div>
@@ -1178,10 +1178,10 @@ export default defineComponent({
position: absolute;
top: 0;
right: 0;
width: 4rem;
width: 2.5rem;
background: none;
transform: translate(100%, -100%);
height: 4rem;
height: 2.5rem;
img{
width: 100%;
height: 100%;

8
src/component/Detail/DesignPrintOperationMobile.vue
View File

@@ -98,7 +98,7 @@
<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${printStyleList[index]?.transform?.rotateZ}deg)`}" class="designOpenrtionMobile_imgItme" draggable="false">
</div>
</div>
<img v-lazy="operationCurrent?.undividedLayer?operationCurrent.undividedLayer:operationCurrent.path" alt="" class="designOpenrtion_sketch">
<img :src="operationCurrent?.undividedLayer?operationCurrent.undividedLayer:operationCurrent.path" alt="" class="designOpenrtion_sketch">
<div class="designOpenrtionMobile_btn">
<ul v-if="overallSingle" v-for="item,index in printStyleList[stateOverallSingle]" :key="item" :class="{active:item?.designOpenrtionBtn?item?.designOpenrtionBtn:false}" class="designOpenrtionMobile_Mousingle" :style="item.style" @touchstart.stop="itemMoveMousedown(index,$event)">
<li class="designOpenrtionMobile_btn_top" @touchstart.stop="itemSizeMousedown('top',$event)"></li>
@@ -107,7 +107,7 @@
<li class="designOpenrtionMobile_btn_right" @touchstart.stop="itemSizeMousedown('right',$event)"></li>
<li class="designOpenrtionMobile_rotote" v-rotote.stop="[index,item.transform]"></li>
<li class="designOpenrtionMobile__delete" @click="deletePrint">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAdBJREFUSImt1r1uU0EQBeDPFh1pgBQEEwFVAg9BROhCAh1FAg1gkMA8DA0oKOEB3IEIRQgF4SEQBIUC6ENSGgPFXaPx+udeSxxppPXOzJnZ8e7MrRmPWdzANZxPv+EbvmILL/G9hGcADayjgz8l0kUb56qSX8dhBeJcDrFSRv44ZRQdt3EPczieZB5NvB1ymta4zCP5J1yucOIFfM6CDJykob8s73GiAnkPJ7Eb/H9iJhpsZJlPQh6D7AWe9Z5iFr+CIpalhjWspnXZ/pXA01FURkv/HxpxK+g2UE+yGfZXM5+doHt4DEtB2R5dAXdD9nfG2LVxNa2XKGreiziXGefZ5rKZbCLmg/4jHIWNqSEZ1fC0IrnE0bM5qqdFGWoV92RBf/P/S3RRVqI3YaOZGd8eQpgHXMt8HgTd67qi5fZwMzOO5XuREmim9ShEji04q78tLwSDSR/aYuD599DgeVDsY3pMhqOQt4pnUXlGf7PbTQ5VcQofgv8BTudGK/rb9Z6it5RhEV+CX1cxYoeiZXDg7OC+4vpNJbmkuC3vMtsuHpVltKzo55OOzINxmeeYxhPVhn5H0ftnhhGNeu49NBSjdBkX9H+27Cvu+Sv8GEXwF9+O3b1zwZqdAAAAAElFTkSuQmCC" alt="">
<img src="../../assets/images/homePage/cuowu.svg" alt="">
</li>
</ul>
<div v-show="!overallSingle"></div>
@@ -1213,10 +1213,10 @@ export default defineComponent({
position: absolute;
top: 0;
right: 0;
width: 4rem;
width: 2.5rem;
background: none;
transform: translate(100%, -100%);
height: 4rem;
height: 2.5rem;
img{
width: 100%;
height: 100%;

3
src/tool/canvasDrawing.js
View File

@@ -1,3 +1,4 @@
import cuowuImg from '@/assets/images/homePage/cuowu.svg'
function multiselectJS(canvas) {//获取整体宽高
canvas.discardActiveObject() // 丢弃当前活动的对象和触发事件。 如果fabric作为鼠标事件的结果调用该函数，则将该事件作为参数传递给自定义事件的fire函数。 当作为一个方法使用时，参数没有任何应用。
const sel = new fabric.ActiveSelection(canvas.getObjects(), {
@@ -269,7 +270,7 @@ async function JSSetTexture(src,){
return img
}
function JSSetRemoveImage(fun){
const deleteIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAdBJREFUSImt1r1uU0EQBeDPFh1pgBQEEwFVAg9BROhCAh1FAg1gkMA8DA0oKOEB3IEIRQgF4SEQBIUC6ENSGgPFXaPx+udeSxxppPXOzJnZ8e7MrRmPWdzANZxPv+EbvmILL/G9hGcADayjgz8l0kUb56qSX8dhBeJcDrFSRv44ZRQdt3EPczieZB5NvB1ymta4zCP5J1yucOIFfM6CDJykob8s73GiAnkPJ7Eb/H9iJhpsZJlPQh6D7AWe9Z5iFr+CIpalhjWspnXZ/pXA01FURkv/HxpxK+g2UE+yGfZXM5+doHt4DEtB2R5dAXdD9nfG2LVxNa2XKGreiziXGefZ5rKZbCLmg/4jHIWNqSEZ1fC0IrnE0bM5qqdFGWoV92RBf/P/S3RRVqI3YaOZGd8eQpgHXMt8HgTd67qi5fZwMzOO5XuREmim9ShEji04q78tLwSDSR/aYuD599DgeVDsY3pMhqOQt4pnUXlGf7PbTQ5VcQofgv8BTudGK/rb9Z6it5RhEV+CX1cxYoeiZXDg7OC+4vpNJbmkuC3vMtsuHpVltKzo55OOzINxmeeYxhPVhn5H0ftnhhGNeu49NBSjdBkX9H+27Cvu+Sv8GEXwF9+O3b1zwZqdAAAAAElFTkSuQmCC"
const deleteIcon = cuowuImg
// 创建删除图片元素
let deleteImg = document.createElement('img')
deleteImg.src = deleteIcon