补充图片裁剪形状

src/configs/imageClip.ts

@@ -21,6 +21,22 @@ export const CLIPPATHS = {
     radius: '0',
     style: '',
   },
+  rect2: {
+    name: '矩形2',
+    type: ClipPathTypes.POLYGON,
+    style: 'polygon(0% 0%, 80% 0%, 100% 20%, 100% 100%, 0 100%)',
+    createPath: (width: number, height: number) => {
+      return `M 0 0 L ${width * 0.8} 0 L ${width} ${height * 0.2} L ${width} ${height} L 0 ${height} Z`
+    },
+  },
+  rect3: {
+    name: '矩形3',
+    type: ClipPathTypes.POLYGON,
+    style: 'polygon(0% 0%, 80% 0%, 100% 20%, 100% 100%, 20% 100%, 0% 80%)',
+    createPath: (width: number, height: number) => {
+      return `M 0 0 L ${width * 0.8} 0 L ${width} ${height * 0.2} L ${width} ${height} L ${width * 0.2} ${height} L 0 ${height * 0.8} Z`
+    },
+  },
   roundRect: {
     name: '圆角矩形',
     type: ClipPathTypes.RECT,
@@ -37,15 +53,23 @@ export const CLIPPATHS = {
     type: ClipPathTypes.POLYGON,
     style: 'polygon(50% 0%, 0% 100%, 100% 100%)',
     createPath: (width: number, height: number) => {
-      return `M ${width / 2} 0 L 0 ${height} L ${width} ${height} Z`
+      return `M ${width * 0.5} 0 L 0 ${height} L ${width} ${height} Z`
     },
   },
-  pentagon: {
+  triangle2: {
-    name: '五边形',
+    name: '三角形2',
     type: ClipPathTypes.POLYGON,
-    style: 'polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)',
+    style: 'polygon(50% 100%, 0% 0%, 100% 0%)',
     createPath: (width: number, height: number) => {
-      return `M ${width / 2} 0 L ${width} ${0.38 * height} L ${0.82 * width} ${height} L ${0.18 * width} ${height} L 0 ${0.38 * height} Z`
+      return `M ${width * 0.5} ${height} L 0 0 L ${width} 0 Z`
+    },
+  },
+  triangle3: {
+    name: '三角形3',
+    type: ClipPathTypes.POLYGON,
+    style: 'polygon(0% 0%, 0% 100%, 100% 100%)',
+    createPath: (width: number, height: number) => {
+      return `M 0 0 L 0 ${height} L ${width} ${height} Z`
     },
   },
   rhombus: {
@@ -53,7 +77,55 @@ export const CLIPPATHS = {
     type: ClipPathTypes.POLYGON,
     style: 'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)',
     createPath: (width: number, height: number) => {
-      return `M ${width / 2} 0 L ${width} ${height / 2} L ${width / 2} ${height} L 0 ${height / 2} Z`
+      return `M ${width * 0.5} 0 L ${width} ${height * 0.5} L ${width * 0.5} ${height} L 0 ${height * 0.5} Z`
+    },
+  },
+  hexagon: {
+    name: '六边形',
+    type: ClipPathTypes.POLYGON,
+    style: 'polygon(20% 0%, 80% 0%, 100% 50%, 80% 100%, 20% 100%, 0% 50%)',
+    createPath: (width: number, height: number) => {
+      return `M ${width * 0.2} 0 L ${width * 0.8} 0 L ${width} ${height * 0.5} L ${width * 0.8} ${height} L ${width * 0.2} ${height} L 0 ${height * 0.5} Z`
+    },
+  },
+  pentagon: {
+    name: '五边形',
+    type: ClipPathTypes.POLYGON,
+    style: 'polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)',
+    createPath: (width: number, height: number) => {
+      return `M ${width * 0.5} 0 L ${width} ${0.38 * height} L ${0.82 * width} ${height} L ${0.18 * width} ${height} L 0 ${0.38 * height} Z`
+    },
+  },
+  parallelogram: {
+    name: '平行四边形',
+    type: ClipPathTypes.POLYGON,
+    style: 'polygon(30% 0%, 100% 0%, 70% 100%, 0% 100%)',
+    createPath: (width: number, height: number) => {
+      return `M ${width * 0.3} 0 L ${width} 0 L ${width * 0.7} ${height} L 0 ${height} Z`
+    },
+  },
+  parallelogram2: {
+    name: '平行四边形2',
+    type: ClipPathTypes.POLYGON,
+    style: 'polygon(30% 100%, 100% 100%, 70% 0%, 0% 0%)',
+    createPath: (width: number, height: number) => {
+      return `M ${width * 0.3} ${height} L ${width} ${height} L ${width * 0.7} 0 L 0 0 Z`
+    },
+  },
+  trapezoid: {
+    name: '梯形',
+    type: ClipPathTypes.POLYGON,
+    style: 'polygon(25% 0%, 75% 0%, 100% 100%, 0% 100%)',
+    createPath: (width: number, height: number) => {
+      return `M ${width * 0.25} 0 L ${width * 0.75} 0 L ${width} ${height} L 0 ${height} Z`
+    },
+  },
+  trapezoid2: {
+    name: '梯形2',
+    type: ClipPathTypes.POLYGON,
+    style: 'polygon(0% 0%, 100% 0%, 75% 100%, 25% 100%)',
+    createPath: (width: number, height: number) => {
+      return `M 0 0 L ${width} 0 L ${width * 0.75} ${height} L ${width * 0.25} ${height} Z`
     },
   },
 }

src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue

@@ -18,7 +18,7 @@
                 :key="index"
                 @click="presetImageClip(index)"
               >
-                <div class="shape" :style="{ clipPath: item.style }"></div>
+                <div class="shape" :style="{ backgroundImage: `url(${handleElement.src})`, clipPath: item.style }"></div>
               </div>
             </div>
 
@@ -407,7 +407,7 @@ export default defineComponent({
 }
 
 .clip {
-  width: 280px;
+  width: 260px;
   font-size: 12px;
 
   .title {
@@ -425,12 +425,14 @@ export default defineComponent({
   align-items: center;
   cursor: pointer;
 
-  @include grid-layout-item(5, 19%);
+  @include grid-layout-item(5, 16%);
 
   .shape {
     width: 40px;
     height: 40px;
-    background-color: #e1e1e1;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
   }
 }
 </style>