github/PPTist
1
0
Fork 0
mirror of https://github.com/pipipi-pikachu/PPTist.git synced 2025-04-15 02:20:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

补充图片裁剪形状

Browse Source
This commit is contained in:
pipipi-pikachu 2021-01-31 10:29:46 +08:00
parent 0fa13dafeb
commit 97b0fd5fe3
2 changed files with 84 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
src/configs/imageClip.ts
View File

@ -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: {
name: '五边形',
triangle2: {
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`
},
},
}

10
src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue
View File

@ -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>