更新记录

1.1.7（2024-09-26）

优化

1.1.6（2024-09-26）

优化

1.1.5（2024-09-25）

圆角支持

平台兼容性

xn-scale-view

开发文档

UTS 语法 UTS API插件 UTS 组件插件 Hello UTS

使用方法

<template>
    <view class="box" @click="click" @touchstart="" @touchmove="" @touchend="">
        <!--圆角 radius="15" radius="[10, 5, 10, 12]"  radius="[10, 10, 12, 12, 10, 5, 5, 10]"-->
        <xn-scale-view :scale="scale" @change="change" radius="[10, 5, 10, 12]" style="flex: 1;">
            <view style="flex: 1;background-color: red; position: relative; justify-content: center; align-items: center;">
                <view style="position: absolute; top: 0; left: 0; width: 20px; height: 20px; background: #000;"></view>
                <view style="position: absolute; top: 0; right: 0; width: 20px; height: 20px; background: #000;"></view>
                <view style="position: absolute; bottom: 0; left: 0; width: 20px; height: 20px; background: #000;"></view>
                <view style="position: absolute; bottom: 0; right: 0; width: 20px; height: 20px; background: #000;"></view>
                <view>
                    <text style="color: #ffffff;">xn-scale-view</text>
                </view>
            </view>
        </xn-scale-view>
    </view>
    <view class="content">
        <button class="button" type="primary"  @tap="changeScale(1)">scale++</button>
        <button class="button" type="primary"  @tap="changeScale(0)">scale--</button>
    </view>
</template>

<script setup>
    const click = (e) => {
        console.log(e);
    };
    const  = (e) => {
        console.log("", e);
    };
    const  = (e) => {
        console.log("", e);
    };
    const  = (e) => {
        console.log("", e);
    };
    const scale = ref(1);
    const changeScale = (type) => {
        type === 1 ? scale.value += 0.2 : scale.value -= 0.2;
        console.log("changeScale", scale.value);
    }
    const change = (value) => {
        console.log(value.detail.type, value.detail);
        if (value.detail.type === "zoom") {
            scale.value = value.detail.scale;
        }
    }
</script>

<style lang="scss">
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20rpx;
        .button{
            margin-bottom: 20rpx;
            width: 710rpx;
        }
    }
    .box{
        width: 750rpx;
        height: 422rpx;
        background: #000;
    }
</style>