四点裁切组件
这是一个很'常用'的四点裁切组件。
支持平台
微信小程序
效果
使用
新建小程序，如果存在跳过此步骤。
在项目目录下执行npm init生成package.json文件，如果存在package.json文件跳过此步骤。
执行npm i four-dots-clipper安装组件。
点击操作栏上的工具-构建npm成功之后将会出现一个miniprogram_npm文件夹。
引用组件
index.json
{
"usingComponents": {
"fp-clipper": "/miniprogram_npm/four-dots-clipper/index"
},
"disableScroll": true // 防止ios随意拖拽
}加载组件
index.wxml
<view>组件</view>
<fp-clipper id="fpc" src="https://picsum.photos/150/100"></fp-clipper>
<button type="primary" bindtap="clip">裁切</button>
<view>预览</view>
<image src="{{preSrc}}" style="width: {{w}}px; height: {{h}}px;" mode="scaleToFill"></image>组件方法
index.js
Page({
data: {
preSrc: "",
w: 0,
h: 0
},
async clip() {
let res = await this.selectComponent('#fpc').clip() // 调用组件中的裁切
this.setData({ preSrc: res.tempFilePath, w: res.width, h: res.height })
}
})属性
src
src:string 图片地址
config
config: IFourDotsClipperConfig 配置
/**
* 配置
*/
export interface IFourDotsClipperConfig {
/**
* 允许三角形
* 1.0.5
*/
allowTriangle?: boolean
/** 渲染间隔 ms */
renderInterval?: number
/** 颜色 线与点 */
color?: string,
/** 错颜色 线与点 */
errColor?: string
/** 点 */
point?: {
/** 颜色 点 */
color?: string,
/** 错颜色 点 */
errColor?: string,
/** 半径 */
raduis?: number,
},
/** 线 */
line?: {
/** 颜色 线 */
color?: string,
/** 错颜色 线 */
errColor?: string,
/** 宽度 */
width?: number
}
}方法
clip()
async clip(): Promise<IFourDotsClipperClipResult> 裁切图片
/**
* 裁切的返回值
*/
export interface IFourDotsClipperClipResult {
/** BASE64字符串 */
base64: string,
/** 临时图片 */
tempFilePath: string,
/** 渲染的图片宽度 */
width: string,
/** 渲染的图片高度 */
height: string
}
