更新记录

1.0.0(2024-01-30)

图片获取选中的矩形框距离图片的头部左边锚点距离和长宽


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 app-vue × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

图片获取选中的矩形框距离图片的头部左边锚点距离和长宽

vue2的话可以自己去修改一下插件的输出和调用,案例是vue3写法调用的

<template>
    <view style="padding-top: 40px;">

        <view style="width: 80%; margin: 0 auto;">
            <mushan-point ref="mushanRef" :imgUrl="'/static/logo.png'" @getPoint="getPoint"></mushan-point>
        </view>

        <view>
            <view>距离图片头部距离:{{logdata.topN}} px</view>
            <view>距离图片左边距离:{{logdata.leftN}} px</view>
            <view>矩形框宽:{{logdata.widthMd}} px</view>
            <view>矩形框高:{{logdata.heightMd}} px</view>
        </view>

        <button @click="mushanRef.onlogClear()">重置</button>

    </view>
</template>

<script setup>
    import {
        onShow,
        onReady,
        onReachBottom,
        onPullDownRefresh,
        onShareAppMessage
    }
    from '@dcloudio/uni-app';
    import {
        getCurrentInstance,
        ref,
        reactive,
        inject,
        computed,
        defineProps,
        watch,
        nextTick,
        onMounted,
        provide
    } from 'vue';

    let mushanRef = ref(null);
    let logdata = reactive({})
    function getPoint(e){
        logdata.leftN = e.leftN  
        logdata.topN = e.topN
        logdata.widthMd = e.widthMd
        logdata.heightMd = e.heightMd
    }

</script>

<style scoped lang="scss">
    .logoBox {
        width: 85%;
        margin: 0 auto;
        position: relative;
        .logo {
            width: 100%;
            height: auto;
        }
        .maodian{
            border: 1px solid red;
            position:absolute;
            left: 0;
            top: 0;
        }
    }
</style>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问