四点裁切组件

这是一个很'常用'的四点裁切组件。🍾

支持平台

​

微信小程序

效果

使用

新建小程序，如果存在跳过此步骤。

在项目目录下执行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
}