插件地址
插件功能
支持多边形图片裁剪,试一试,你会发现可以把图片裁成奇奇怪怪的形状,三角形,菱形,五角星,五边形…
图片来源:目前从相册选择
平台支持:
APP | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节跳动小程序 | QQ小程序 |
---|
√ | √ | √ | 未测 | 未测 | 未测 | 未测 |
属性
名称 | 类型 | 默认值 | 说明 | 版本 |
---|
side | Number \String | 5 | 边数,圆形使边数多即可,4为菱形,若使用正矩形(长方形,正方形)请rect=true | 1.0.0 |
radius | Number \String | 150 | 半径:边点至中心点距离 | 1.0.0 |
rect | Boolean | false | 正矩形,为true时,side失效 | 1.0.0 |
rectW | Number \String | 0 | 正矩形宽,没有或为0,默认取radius | 1.0.0 |
rectH | Number \String | 0 | 正矩形高,没有或为0,默认取radius | 1.0.0 |
globalAlpha | Number \String | 0.6 | 裁剪蒙层透明度 | 1.0.0 |
inner | Boolean | false | 启用内多边形 | 1.0.0 |
innerTimes | Number\String | 2.5 | 内多边形,靠内的点半径为radius的innerTimes分之一 | 1.0.0 |
slots
事件
名称 | 回调参数 | 说明 |
---|
clipImageAfter | src | 裁剪之后的图片 |
示例
<mosowe-clip-image
:side="side"
:radius="radius"
:rect="rect"
:rectW="rectW"
:rectH="rectH"
:globalAlpha="globalAlpha"
:inner="inner"
:innerTimes="innerTimes"
@clipImageAfter="prevImage"/>
<script>
export default {
name: 'canvas-clip-image',
components: {},
data () {
return {
showComponent: false,
side: 3,
radius: 150,
rect: false,
rectW: 300,
rectH: 300,
globalAlpha: 0.6,
inner: false,
innerTimes: 2.5
};
},
// 页面方法
methods: {
// 预览
prevImage (res) {
this.showComponent = false;
uni.previewImage({
current: 0,
urls: [res]
});
},
show () {
this.showComponent = true;
}
}
};
</script>