-
+
-
+
+ 混合模式++
+
+
-
+
+ 更多++
+
+
-
+
+ 平铺++
+
-
裁剪@@ -276,9 +294,9 @@
@font-face { font-family: 'iconfont'; - src: url('iconfont.woff2?t=1762934152017') format('woff2'), - url('iconfont.woff?t=1762934152017') format('woff'), - url('iconfont.ttf?t=1762934152017') format('truetype'); + src: url('iconfont.woff2?t=1766460927921') format('woff2'), + url('iconfont.woff?t=1766460927921') format('woff'), + url('iconfont.ttf?t=1766460927921') format('truetype'); }第二步：定义使用 iconfont 的样式
@@ -304,6 +322,33 @@-
+
-
+
+ + 混合模式 ++.icon-hunhemoshi ++
+
+
-
+
+ + 更多 ++.icon-gengduo ++
+
+
-
+
+ + 平铺 ++.icon-repeat ++
+
-
@@ -637,6 +682,30 @@@@ -424,15 +460,17 @@ body { .tool-tooltip { display: none; + pointer-events: none; position: absolute; - left: 100%; - top: 50%; - transform: translateY(-50%); - background-color: rgba(0, 0, 0, 0.7); + writing-mode: vertical-rl; /* 竖直排列 */ + text-orientation: upright; /* 保持文字正常显示 */// left: 100%; + left: 50%; + top: -0.8rem; + transform: translate(-50%, -100%); + background-color: rgba(0, 0, 0, 0.9); color: white; - padding: 0.4rem 0.8rem; + padding: 0.8rem 0.4rem; border-radius: 0.4rem; - margin-left: 0.8rem; white-space: nowrap; font-size: 1.2rem; z-index: 10; @@ -441,12 +479,12 @@ body { .tool-tooltip:before { content: ""; position: absolute; - top: 50%; - right: 100%; - margin-top: -0.5rem; + left: 50%; + bottom: 0; + transform: translate(-50%, 100%); border-width: 0.5rem; border-style: solid; - border-color: transparent rgba(0, 0, 0, 0.7) transparent transparent; + border-color: rgba(0, 0, 0, 0.9) transparent transparent transparent; } /* 深色模式适配 */ diff --git a/src/component/Detail/canvas/index.vue b/src/component/Detail/canvas/index.vue index a44e31ad..ce1ec6cb 100644 --- a/src/component/Detail/canvas/index.vue +++ b/src/component/Detail/canvas/index.vue @@ -5,14 +5,17 @@+ +
-
+
-
+
+ 混合模式+#icon-hunhemoshi+
+
+
-
+
+ 更多+#icon-gengduo+
+
+
-
+
+ 平铺+#icon-repeat+
+
+ + - - + - - - - 🎨 -- -添加画布图片-- 红 --红绿图模式-- 普 --普通模式-- 更 --更换底图-- 导 --导出JSON-- 复 --复制JSON-- 查 -查询图层-+store.state.Workspace.projectPath !== route.fullPath), + otherData:computed(()=>({ + canvasId: store.state.DesignDetail.selectDetail.canvasId, + color: store.state.DesignDetail.selectDetail.color, + printObject: store.state.DesignDetail.selectDetail.printObject, + trims: store.state.DesignDetail.selectDetail.trims, + })), }) watch(()=>detailData.selectDetail,(newValue,oldValue)=>{ detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id) @@ -117,7 +126,6 @@ export default defineComponent({ provide('canvasType',detailData.canvasType) const editFront = (str:any)=>{//编辑前后片 - let canvasJSON = '' as any if(detailData.currentView === 'canvasEditor'){ sessionStorage.setItem('sketchEdit',detailDom.editCanvas.getJSON()) @@ -309,7 +317,7 @@ export default defineComponent({ sessionStorage.removeItem('frontBackEdit'); sessionStorage.removeItem('sketchEdit'); detailData.canvasLoad = false - privewDetail() + // privewDetail() }) onMounted(()=>{ nextTick(async ()=>{ diff --git a/src/component/Detail/detailLeft/colorBox/pallet.vue b/src/component/Detail/detailLeft/colorBox/pallet.vue index 5447fe60..8e7c2f25 100644 --- a/src/component/Detail/detailLeft/colorBox/pallet.vue +++ b/src/component/Detail/detailLeft/colorBox/pallet.vue @@ -1,5 +1,5 @@ - +{{ selectColor.hex }} @@ -117,6 +117,7 @@ export default defineComponent({ }) const getpalletListDom = reactive({ }) + const palletRef = ref(null) watch(()=>palletData.color_,(newVal:any)=>{ if(!newVal?.rgba?.r)return if(palletData.color?.gradient?.gradientShow){ @@ -221,7 +222,7 @@ export default defineComponent({ // this.selectColor = {rgba:gradientRgba,hex:hex} //顔色选择器默认颜色 - let gradientWidth = (document.querySelector('.pallet .color_setting_operate_bg') as any).clientWidth + let gradientWidth = (palletRef.value.querySelector('.color_setting_operate_bg') as any).clientWidth let position = { x:event.clientX, left:event.target.style.left?event.target.style.left.split('%')[0]:0 @@ -276,8 +277,8 @@ export default defineComponent({ // 点击外部区域关闭颜色选择器 const handleClickOutside = (event: Event) => { const target = event.target as HTMLElement; - const colorSettingBlock = document.querySelector('.color_setting_block'); - const palletColo = document.querySelector('.palletColo'); + const colorSettingBlock = palletRef.value.querySelector('.color_setting_block'); + const palletColo = palletRef.value.querySelector('.palletColo'); // 如果点击的是 .palletColo 或 .color_setting_block 内部，则不关闭 if (palletData.palletShow && colorSettingBlock && @@ -294,7 +295,7 @@ export default defineComponent({ nextTick().then(()=>{ const backIcon = document.createElement('div'); backIcon.classList.add('vc-sketch-color-wrap') - let dropperDom = document.getElementsByClassName("pallet")?.[0]?.getElementsByClassName('vc-chrome-fields-wrap')[0] + let dropperDom = palletRef.value.getElementsByClassName('vc-chrome-fields-wrap')[0] dropperDom.appendChild(backIcon); backIcon.addEventListener('click',async ()=>{ try { @@ -322,7 +323,7 @@ export default defineComponent({ return{ ...toRefs(palletData), ...toRefs(getpalletListDom), - + palletRef, openPallet, selectImgItem, setOperate, @@ -614,6 +615,7 @@ export default defineComponent({ position: absolute; content: ""; top: 0.2rem; + left: 0; width: 1rem; height: 1rem; border-radius: 50%; diff --git a/src/lang/cn.ts b/src/lang/cn.ts index 6f49adb0..eb4a8584 100644 --- a/src/lang/cn.ts +++ b/src/lang/cn.ts @@ -1433,7 +1433,42 @@ export default { selectTexture: '选择要使用的纹理', DeleteTexture: '删除纹理', TextureSettings: '纹理设置', - TextureSelector: '纹理选择' + TextureSelector: '纹理选择', + // 混合模式 + CompositeNormal: '正常', + CompositeNormalTip: '正常：默认，新图形覆盖原内容', + CompositeDarken: '变暗', + CompositeDarkenTip: '变暗：取暗部颜色', + CompositeMultiply: '正片叠底', + CompositeMultiplyTip: '正片叠底：图像变暗', + CompositeColorBurn: '颜色加深', + CompositeColorBurnTip: '颜色加深：增加对比度，变暗底层颜色', + CompositeLighten: '变亮', + CompositeLightenTip: '变亮：取亮部颜色', + CompositeScreen: '滤色', + CompositeScreenTip: '滤色：图像变亮', + CompositeColorDodge: '颜色减淡', + CompositeColorDodgeTip: '颜色减淡：降低对比度，加亮底层颜色', + CompositeLighter: '颜色减淡（添加）', + CompositeLighterTip: '颜色减淡（添加）：重叠部分亮度叠加', + CompositeOverlay: '叠加', + CompositeOverlayTip: '叠加：高光效果', + CompositeSoftLight: '柔光', + CompositeSoftLightTip: '柔光：混合效果', + CompositeHardLight: '强光', + CompositeHardLightTip: '强光：高光效果', + CompositeDifference: '差值', + CompositeDifferenceTip: '差值：取两图像颜色差', + CompositeExclusion: '排除', + CompositeExclusionTip: '排除：取两图像颜色差的绝对值', + CompositeHue: '色相', + CompositeHueTip: '色相：保留原图像颜色，改变新图像色相', + CompositeSaturation: '饱和度', + CompositeSaturationTip: '饱和度：保留原图像色相，改变新图像饱和度', + CompositeColor: '颜色', + CompositeColorTip: '颜色：保留原图像饱和度，改变新图像颜色', + CompositeLuminosity: '亮度', + CompositeLuminosityTip: '亮度：保留原图像颜色，改变新图像亮度', }, speedList: { High: '高级', diff --git a/src/lang/en.ts b/src/lang/en.ts index df0bb91d..bce9408c 100644 --- a/src/lang/en.ts +++ b/src/lang/en.ts @@ -1433,7 +1433,42 @@ export default { selectTexture: 'Select the texture you want to use', DeleteTexture: 'Delete Texture', TextureSettings: 'Texture Settings', - TextureSelector: 'Texture Selector' + TextureSelector: 'Texture Selector', + // 混合模式 + CompositeNormal: 'Normal', + CompositeNormalTip: 'Normal: Default, new graphics cover original content', + CompositeDarken: 'Darken', + CompositeDarkenTip: 'Darken: Take the darkest color', + CompositeMultiply: 'Multiply', + CompositeMultiplyTip: 'Multiply: Darken the image', + CompositeColorBurn: 'Color Burn', + CompositeColorBurnTip: 'Color Burn: Increase contrast and darken the bottom color', + CompositeLighten: 'Lighten', + CompositeLightenTip: 'Lighten: Take the brightest color', + CompositeScreen: 'Screen', + CompositeScreenTip: 'Screen: Lighten the image', + CompositeColorDodge: 'Color Dodge', + CompositeColorDodgeTip: 'Color Dodge: Reduce contrast and lighten the bottom color', + CompositeLighter: 'Color Dodge (Add)', + CompositeLighterTip: 'Color Dodge (Add): Add the brightness of the overlapping parts', + CompositeOverlay: 'Overlay', + CompositeOverlayTip: 'Overlay: Highlight effect', + CompositeSoftLight: 'Soft Light', + CompositeSoftLightTip: 'Soft Light: Blend effect', + CompositeHardLight: 'Hard Light', + CompositeHardLightTip: 'Hard Light: Highlight effect', + CompositeDifference: 'Difference', + CompositeDifferenceTip: 'Difference: Take the color difference between the two images', + CompositeExclusion: 'Exclusion', + CompositeExclusionTip: 'Exclusion: Take the absolute value of the color difference between the two images', + CompositeHue: 'Hue', + CompositeHueTip: 'Hue: Preserve the original image color and change the hue of the new image', + CompositeSaturation: 'Saturation', + CompositeSaturationTip: 'Saturation: Preserve the original image hue and change the saturation of the new image', + CompositeColor: 'Color', + CompositeColorTip: 'Color: Preserve the original image saturation and change the color of the new image', + CompositeLuminosity: 'Luminosity', + CompositeLuminosityTip: 'Luminosity: Preserve the original image color and change the luminosity of the new image', }, speedList: { High: 'High', From 73aca073914908d5c8dc9da420e6536c0db4d943 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E5=BF=97=E9=B9=8F?= <2916022834@qq.com> Date: Mon, 5 Jan 2026 11:47:36 +0800 Subject: [PATCH 004/142] =?UTF-8?q?=E7=94=BB=E5=B8=83=E5=8D=B0=E8=8A=B1?= =?UTF-8?q?=E5=90=88=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/images/canvas/xiangao.png | Bin 0 -> 147329 bytes src/assets/images/canvas/xiangaofenge.png | Bin 0 -> 162487 bytes src/assets/images/canvas/yinhua1.jpg | Bin 0 -> 93366 bytes .../commands/FillRepeatCommand.js | 1 + .../CanvasEditor/commands/LayerCommands.js | 2 + src/component/Canvas/CanvasEditor/index.vue | 1 + .../CanvasEditor/managers/CanvasManager.js | 69 ++++++++++++++---- .../CanvasEditor/managers/ExportManager.js | 44 ++++++++--- .../CanvasEditor/managers/LayerManager.js | 18 +++++ .../Canvas/CanvasEditor/utils/helper.js | 29 ++++++++ .../Canvas/CanvasEditor/utils/objectHelper.js | 28 +++++-- .../CanvasEditor/utils/selectionToImage.js | 14 +++- src/component/Canvas/canvasExample.vue | 33 ++++++++- 13 files changed, 198 insertions(+), 41 deletions(-) create mode 100644 src/assets/images/canvas/xiangao.png create mode 100644 src/assets/images/canvas/xiangaofenge.png create mode 100644 src/assets/images/canvas/yinhua1.jpg diff --git a/src/assets/images/canvas/xiangao.png b/src/assets/images/canvas/xiangao.png new file mode 100644 index 0000000000000000000000000000000000000000..89774ded5c0cf086c3062549eebe2c5f612668c8 GIT binary patch literal 147329 zcmeFZXH-;Ow>5|el2nkKBShl-^0=YVPh@pZ0G9X;AQXPV5MPW?O^%;a_;~8dAu+x zy#GBcS1 4!=Z%lY^k+O`PizuJnkO>ta0k?Zbl ^<0t)T8sOiU7SnfWlhc28hv!zWPr*{=F$5$7pUPR_Ni`3DHZbE&{X z+;HvIkYJR!mD?}RZ&jT2n}q1}v7U;hZi`*7ubpEpE-vyRoyI DAPCVPo*0Mc0Q z&l|w0n%sceQL0U!?x~3RZD61hl3^l~=%L^$7eQfsXz7B8P3Zm+FGSaZ$jn~?N@I3b z2~M$<&lA?8j$SM=$NL%gs6-Hwe%o|*hi~2_21J+}aiSV78?$idj3O!N{07}LH+^k; zvFUq0TFNP#nodDN{_H&Av9zmDHp-!D+(B-2_@w=%kn2nVRM62f!%*$nYXckUkK<)` z(TkHkGemh`fBOZA+S;f>x0Zu`aj00WKl9n7v#_s7aE5@*jQwl{ lzbL6r*DN2-VH%J_;)#j_0Wy4;2Z7B46p1XtuYvFR97Y+c+jK8>F*q^ HKg~z{ IciTS!?($ZnWlQX zBO2C(yzPS{H4Tl>gHc1c*V)$4(AT)hx^apRL`xr*kW;k~6~3 Ydq)(lJ1%Xs$o0LI7NJJ%J-6bKelFer+=XQ+i zWKeklv)*gSlftI+=R3a4`tRDZX++wFaB+MTUV(X~#m;0;Qi)b~^;rki-S6MO*E DFNsW83d-9KrVTiU7$ `$gJXwUD7w8`kMcCMRLd5YjteE|fd*WXt|X(RA- z%q>P-slaX=u21M?T)*c^_6R|v`@F VZH>7wooBnk{a5oV1v;z8;6gk5%%!O)vEs-9ytki5zFltAvLctlnfRY|t)` ~FCoIqVEEL*W7@izWHQ4|> *qjR!?Ow z_MwshJ0_>)f$2 XkRM{h;HX zsP->xcP7P
a-Vl{b&%m@ZTE|kc?JpZ-B{2;i+y9IXG-=tBkow zliHmHGLrvV31q<34%&Zu#MKitp&Ie>YF_}KEo<`2@Hde+;s5&pF2%^_&&Ns+JOE^< zrrjE|uZ@L_5z}oysG3-m0?RWwJG%*Tsv244O-jLcdh+s}A~SEGmu}#P&g>SIh^@6X zUq@4O5T&s5FQ|u5#a09h;<|k%dZ;mfWp@dRR8CEbKp`PiH=Ff^zWX0|!Ee({@v4L~ zIe=*PAo@OLVrp*4pC9ZI-=^ygzdV;q` *F^*j^y^b_Dl0}se}Pig(!- m% ogle%PYSc!HSNe6_{%$U@m?8R?Y-J7*66Tz!{?iVkhe! zpW$cW6ACYfiv1`w<4fjHo2n|*<3xGrRo9xei<($VOxUxBeKF0A_+cF~{rn1trf=H* zO@>JuqGDuKZn{LS0j`P`LS8*tmSxatj@dg+^2pM~g|9%Emv=pk-UXrbo50L#NC^yO zGPl~qFG<=W5SW4s+)3<>gXTu;%2D7mS)ltjHDxxa2JIiyf9)ThqNE$kyWHFu0l26~ zi?o^do;fTFG~OS))e<}6OvcqG;Vz$l=h9VNZ1ss{ekF bR7=*J+)24v2bwJUommA=B-!zg?-G|+`1CH=vZ>t)5oIf(!Vb$$BeB_Hb_ z0=9}@f;oV&dnZlZgT4A6;7VM4s}GK&eq0BfUlRY4zNwL5KYaGRA*`^zSTXwYWnJmq zqM!TpO2!6affa!l=NC<@{ogBJW%w8${_6y2B2P7NqUC94peP*)C(@;pgJ+r9l8gMh zT0-|cdC))8B1dQcSA#-Y-~WA**7Tt(c~PNvCLMj9%kY3g_(NLNZA~wkB9%Klx=zk= z_jYA1zXqE+s5B{_(kAyjkHE!UkNVMxWXDDVw*tnu8q@dYZJWU-OHeLfiBe9UlyE)o z1i_`yJ+>gECQrZC*4Y-VPuUkyx@g9k2Y>x&C0wwnNDP8P!z 61DB%l`87oO|Q>c5)lZ6=_N?EIErPUgHnHTE_$NmHH*ld$P}W zizpfz1{c1G8SYMrX|rpblOW&`JZ@qngMgv>gtrA+5~%rWS{6aFUs}&jUNrhg4_3*q z{x$#atzt*!+1T6bt8+g}z^)LAkBdW5P=rQ+zQm=j>HY-CWIzWcYst?f*DeqqWk@_J zn_N^^RW}0})!O*M%#+z?*IvF1h5`nfn1Iu*?iQxlAsbUTL_n9zLrsi8qMX&IcMv{G zS}f>#Gd{Hh)0Yn&Poe_6kv(f`9%2xquRikO13PyC5GY{N3TS(f@CE|wc+BeK1n}gr zx|p8&lUZ-)$I7(2{gzjM2r^Ab !1yX^^5p7*N6xZE1br1!BGgcMyR;B2$B^ {DQ!E F{#@wazuU#GdiuAne(f6wJw+<8(B>7DS(oq7b=})L%g8PFP($dmCGyLB2 z0nNe1_dEQA!u7Xd--FHo`e;(qcSS<{wAN@n8)wMkdr2e1NKX%Xtr<*|s#S9J2;aiq zJ+1;ry1#s4`VlEG&m fFS|* Ew-FvBg}&zPV (X?WHS{|px1L9SBDZwTp9Lc$l@IYiLHgrEf& zT8lA`Zf|>(E!#!ihvNlkn-Rz;1^pqV$)D6{IDIkLHkeF6?9sCICtXTk&+wK5{rh82 zY<4tD2dqzb@V(TVm0`@w&ipAQCD+TER^)MtMWUFb=nz~51f&cIYR<&b-29ihPC;JP zRBwFOc9(VT8+wC>noZ~32*#^OO7~L?yWL9AGd!Ya{e#5HD}8+gi&xL6Dbw%A^aZ l2qig$WvB3{iGk?+&;$0EB9l50X$+ z(IZLx|+FG+Y=ttrS8?ayM3q6@~CNvYrZ-)foTBZnSgcNC}KVUnLL3_ z8%Sh7Yiio9?zJ_!Y&`h0yFR9U7dv4AL_y>jQQd8ZSjkEUkQwP0nSY|4&%Fq8G+pPj zVDlYIOaRN(=4{=Q?pw2^_v$tv??z_&fX?WirqIvlWeYc1*ka$%i~2*x&0Xy8u&14z zoaUbvvrCT5#*;E;;y`!pKB~hWJ<#wRP@b_LKW=uxbYKW(n{;(p$I1Un38Pp?Bqil~ zQZ ~w!!t&96Ry957(SE26yEHBrVuDtjMe{p!ELA`9 _P4eJS6D}fa7 *l-z@R&L9cLU13xR?kY1}5j5?S%CuJaTe^Fgl<%>v~Gp}b2$ zvSJKZ@1j`0SJ1zjp5#Cj1RQr2Xj@?um9Fssn5**$cwugTrj|o#SMIT`*Z({;p_}Sh zQ8cVz(w3n`BXY`?ciX}L18h-F9EKjR%*acdSN;7xR wutITuLRqxM~_Ioz6~!AS}2RY-g;E{Lb1bo8d>mZq`i1XX@> -
+
+
-
+
+