更新记录

1.0.1（2021-06-23）

canvas组件触摸事件在微信小程序内的bug

1.0.0（2021-06-22）

无

平台兼容性

mosowe-touch-clip-image：涂抹裁剪插件

插件功能

手指触摸绘制图形，裁剪图片

图片来源：从相册选择 / 拍照

平台支持：

属性

slots

事件

示例

<!-- 触摸裁剪图片 -->
<template>
  <view class='canvas-touch-clip-image'>
        <mosowe-touch-clip-image 
            v-if="!resultImage"
            ref="clipCanvas"
            :image="image"
            :width="width"
            :height="height" 
            radius="30"
            @clipImageAfter="clipImageAfter">
            </mosowe-touch-clip-image >

                <image 
                    v-else
                    mode="aspectFit"
                    class="image-wrap"
                    :src="resultImage"
                />

        <!-- #ifdef MP-WEIXIN -->
            <cover-view class="btn-wrap">
                <cover-view class="btn" @click="chooseImage">
                    选择图片
                </cover-view>
                <cover-view class="btn" @click="clearImage" v-if="!resultImage">
                    重新选择
                </cover-view>
                <cover-view class="btn" @click="confirm" v-if="!resultImage">
                    确定
                </cover-view>
            </cover-view>
        <!-- #endif -->
        <!-- #ifndef MP-WEIXIN -->
            <view class="btn-wrap">
                <view class="btn" @click="chooseImage">
                    选择图片
                </view>
                <view class="btn" @click="clearImage" v-if="!resultImage">
                    重新选择
                </view>
                <view class="btn" @click="confirm" v-if="!resultImage">
                    确定
                </view>
            </view>
        <!-- #endif -->

    </view>
</template>

<script>
export default {
  name: 'canvas-touch-clip-image',
  components: {},
  data () {
    return {
            image: '',
            resultImage: '',
            showClip: true,
            isClip: false,
            width: 300,
            height: 300
    };
  },
    onShow () {
        uni.getSystemInfo({
            success: (res) => {
                this.width = res.screenWidth;
                this.height = res.screenHeight;
            }
        });
    },
  // 页面方法
  methods: {
        // 选择照片
        chooseImage () {
            this.resultImage = '';
            uni.chooseImage({
                count: 1,
                sourceType: ['album', 'camera'],
                success: (res) => {
                    this.image = res.tempFilePaths[0];
                },
                fail: (res) => {
                    console.log(res);
                }
            });
        },
        // 获取裁剪的图片
        clipImageAfter (data) {
            this.isClip = true;
            this.resultImage = data;
            this.image = '';
            this.clearImage();
            // getApp().globalData.image = data;
            // uni.navigateTo({
            //  url: '/pages/canvasTouchClipImage/showImage'
            // });
        },
        // 清空画布
        clearImage () {
            this.$refs.clipCanvas.clearCanavas();
        },
        // 确定
        confirm () {
            this.$refs.clipCanvas.polygon();
        }
    }
};
</script>

<style lang='scss' scoped>
.canvas-touch-clip-image{
    .btn-wrap{
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 3;
        text-align: center;
        height: 60rpx;
        padding: 10rpx 0;
        width: 100%;
        background-color: #fff;
        .btn{
            display: inline-block;
            width: 120rpx;
            height: 60rpx;
            line-height: 60rpx;
            border-radius: 4rpx;
            text-align: center;
            font-size: 18rpx;
            color: #fff;
            background-color: #007AFF;
            margin: 0 10rpx;
        }
    }
}
</style>

版本修復