吃辣条的大妖怪
吃辣条的大妖怪
  • 发布:2020-08-15 15:58
  • 更新:2023-04-23 09:34
  • 阅读:5092

uniapp - 图片缩放 (平面图显示)

分类:uni-app

需求 因为要显示楼层平面图片,并且需要缩放,
不同于查看类型的,有时候需要显示 标记点。所以其他帖子上看的用不到,就自己写了个。
单纯uniapp + image + canvas(显示标记需要使用canvas) 实现;

遇到的坑 : 之前没主要看文档,没使用movable-area,纯canvas 实现,但是有时候一张图标记点会有几百个,并且canvas 在ios好像是有限制 大于1000px 不显示。标记多多时候,会出现卡的问题。

目前实现的代码 外部 使用movable-area ,需要显示标记点,在用canvas 。

图片缩放实现
因为多处使用,自定义了组件
附上代码

<template>  
    <view class="">  
        <!-- :style="{height:screenH+'upx'}" -->  
        <movable-area  scale-area>  
            <movable-view :style="{width:baseInfo.width+'upx',height:baseInfo.height+'upx'}" direction="all" @scale="onScale"  
             @change="onChange" scale :scale-min="minScale" :scale-max="2" :scale-value="scale" >  

                <image :src="baseInfo.path" :style="{width:baseInfo.width+'upx',height:baseInfo.height+'upx'}"></image>  
            </movable-view>  
        </movable-area>  
    </view>  
</template>  

<script>  
    export default {  
        props: {  
            baseInfo: {  
                type: Object,  
                default: function(e) {  
                    return {}  
                }  
            }  
        },  
        data() {  
            return {  
                minScale: 0.1,  
                x: 0,  
                y: 0,  
                scale: 0.5,// 定义缩放倍数  
                old: {  
                    x: 0,  
                    y: 0,  
                    scale: 2  
                },  

            }  
        },  
        methods: {  
            onChange: function(e) {  
                // console.log(e)  
                this.old.x = e.detail.x  
                this.old.y = e.detail.y  
            },  
            onScale: function(e) {  
                // console.log(e)  
                this.old.scale = e.detail.scale;  
                this.x = this.old.x  
                this.y = this.old.y  
                this.$nextTick(function() {  
                    this.x = 0  
                    this.y = 0  
                })  
            },  
            // onLoad:function(){  
            //  this.getStyle();  
            // },  
        }  
    }  
</script>  

<style lang="scss" scoped>  
    movable-view {  
        display: flex;  
        align-items: center;  
        justify-content: center;  
        top: 0;  
        left: 0;  
        // top:140upx;  
        // width:750upx;  
        // height:1476upx;  
        // background-color: #007AFF;  
        color: #fff;  
    }  

    movable-area {  
        height: calc(100vh);  
        width: 750upx;  
        background-color: #fff;  
        overflow: hidden;  
    }  
</style>  

使用代码

<view v-if='imageInfo !== ""'>  
    <view-img :baseInfo="imageInfo" :style="style"></view-img>  
</view>  

js

import viewImg from "./viewImg.vue";   //名字随意  引入使用  

//就不附上全部js ,此处不知道看基础文档,没啥要说的  
components: {  
     viewImg  
},

图片我这是url ,需要获取图片信息 ;因为防止 url重复不停等调用,我 本地缓存了 ,如果有这个需要,大家也可以这样。本地缓存这,ios/安卓 有点不太一样,我后面写到了就顺带提一下吧

    imgInit() {  
                // var context = uni.createCanvasContext('firstCanvas')  
                var that = this;  
                //获取图片链接;  
                var pictureUrl = uni.getStorageSync("pictureUrl");   //  接口返回需要显示的url  
                var picFile = uni.getStorageSync("picFile"); // 存本地地址,不要的存本地 ,直接使用url 不用考虑 安卓和ios。的问题直接使用,  
                //这边就贴上 在线的吧;  

                    uni.getImageInfo({  
                        src: pictureUrl,  
                        success: function(image) {  
                            // uni.showLoading({  
                            //   title: "初次进入,请耐心等待..."  
                            // });  
                            that.imageInfo = image; // 使用   
                            console.log(image)     
                            uni.setStorageSync("picFile", image.path);  
                            var s0 = Math.floor((that.screenW / image.width) * 100) / 100;  
                            // console.log("s0:" + s0);  
                            var s1 = Math.floor((that.screenH / image.height) * 100) / 100;  
                            // console.log("s1:" + s1);  
                            // that.scale = s0 < s1 ? s0 : s1;  
                            that.minScale = s0 < s1 ? s0 : s1;  
                        },  
                        fail: function(image) {  
                            console.log(3);  
                        }  
                    });  
}  

在此处说下 安卓和ios的问题吧 ;
如果需要本地存储,ios中需要将图片下载后,在使用;安卓可以直接 使用 getImageInfo ,为了保持一直不管安卓还是ios ,我这都下载保存了。
同时,此处因为图片下载了,所以如果图片进行了更换,记得删除下本地的图片;
贴上部分代码,官方文档都有

var imageUrl = "http://xxxxxx.jpg/png"  

uni.downloadFile({ // ios 需要下载后,保存到本地 ,  
                    url: imageUrl,  
                    success: (res) => {  
                        console.log("首次加载,下载成功");  
                        console.log(res);  
                        uni.saveFile({  
                            tempFilePath: res.tempFilePath,  
                            success: function(image) {  
                                console.log("存储后,本地信息")  
                                console.log(image);  
                                that.insertFloor(image.savedFilePath);  
                                that.imgInit2(image.savedFilePath)  
                                that.hideLoading();  
                            }  
                        })  
                    }  
                })  

//删除本地图片代码  

deleteImg(path) {  
                //删除已缓存 图片;  
                console.log("链接已更换,删除愿保存图片")  
                uni.removeSavedFile({  
                    filePath: path,  
                    complete: function(res) {  
                        console.log(res)  
                    }  
                })  
            },  

比较简单 希望有用
canvas 仅用在 需要查看标记点的(后期有空写)

2 关注 分享
九月的阿信 一只会飞的鸟

要回复文章请先登录注册

酸奶不太酸

酸奶不太酸

请问大佬如果平面图某块区域需要变色怎么处理呢
2023-04-23 09:34
九月的阿信

九月的阿信

兄弟,后续canvas查看标记点,怎么不更新了呀。麻烦楼主有空的更新一下这块的内容,遇到相同的业务,也是要看标记点位。
2022-06-24 14:59
STR少寒

STR少寒

兄弟,后续canvas查看标记点,怎么不更新了呀
2021-07-09 15:42