# ie310-image-preview

**Repository Path**: ie310mu/ie310-image-preview

## Basic Information

- **Project Name**: ie310-image-preview
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-07-01
- **Last Updated**: 2021-07-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ie310-image-preview

> 图片预览、查看组件，支持：   
放大、缩小、平移、旋转   
在图片上叠加多边形   
自定义绘制多边形
双图片对比展示   

## 查看示例

```
下载源码
https://gitee.com/ie310mu/ie310-image-preview
yarn install
yarn serve
```

## 安装与使用

```
npm安装:  npm install ie310-image-preview
不要用yarn安装，可能安装不到
更新：
npm update ie310-image-preview
使用：
<template>
    <ImagePreview :imgUrl="imgUrl1" ref="ip1"  />
</template>
import { ImagePreview } from 'ie310-image-preview';
...,
components:{
    ImagePreview
}
```

## ImagePreview 功能

```
左转  this.$refs.ip1.rotateImg('left')
右转  this.$refs.ip1.rotateImg('right')
铺满  this.$refs.ip1.adjust()
原始大小  this.$refs.ip1.picSize()
放大、缩小  鼠标滚轮上下滚动
刷新  this.$refs.ip1.update()

在图片上叠加多边形：
<ImagePreview :imgUrl="imgUrl1" :features="features" ref="ip1"  />
features: [
                {
                    type: 'polygon',
                    text: '卡车 68.1%',
                    fillColor: 'rgba(197, 226, 255, 0.6)',
                    points: [
                        [128, 209],[127, 210],........
                    ]
                },
                {
                    type: 'polygon',
                    text: '挖掘机 43.3%',
                    fillColor: 'rgba(255, 208, 186, 0.6)',
                    points: [
                        [128, 209],[127, 210],........
                    ]
                },
                ......
            ]
features是要绘制的形状的对象列表，每个对象具有如下属性：
type：类型，目前只支持多边形polygon
hideBorder：是否隐藏矩形框（矩形框是将所有点包围的一个最小矩形），默认值false
text：在矩形外框左上角输出的文字
hideText：是否隐藏文字，默认值false
fillColor：内部填充颜色
points：点数组，polygon最少需要3个点。以图片左上角为原点。
drawPoint：是否绘制控制点，默认值false
controlsVisible:是否显示控制按钮行，默认值true
leftBtnVisible:是否显示左转按钮，默认值true
rightBtnVisible:是否显示右转按钮，默认值true
customBtns:自定义按钮，格式：
[
                {
                    img: require('./assets/images/full.png'),
                    text: '全屏',
                    callback: () => {
                        alert(1);
                    }
                },
                {
                    img: require('./assets/images/full.png'),
                    text: '全屏2',
                    callback: () => {
                        alert(2);
                    }
                }
]



开始自定义绘制多边形(左键添加点，右键结束)  this.$refs.ip1.beginDrawFeature('polygon')
删除最后一个点  this.$refs.ip1.clearOnePoint()
删除所有点  this.$refs.ip1.clearAllPoint()
通过事件响应绘制结束事件：
<ImagePreview :imgUrl="imgUrl1" :features="features" ref="ip1" @featureDrawed="onFeatureDrawed" />
onFeatureDrawed(type, points, imgWidth, imgHeight) {
            console.info('new ' + type, points);
            this.features.push({
                type,
                points,
                fillColor: 'rgba(255,255,255,0.4)',
                text: '',
                hideBorder: true,
                hideText: true,
                drawPoint: true
            });
}

设置图像边框(加到上层容器)：
        <div class="imagePreview">
            <ImagePreview
            />
        </div>
    .imagePreview {
        border: solid 1px red;
    }


```

## ImagePreview2 功能

```
左右两张图片对比显示，可以做到同步放大、缩小、平移、旋转
支持的方法名基本与ImagePreview一致，需要的属性名有差别：
            <ImagePreview2
                :imgUrl1="imgUrl1"
                :imgUrl2="imgUrl2"
                :features1="features"
                :features2="features"
                ref="ip2"
            />

不支持自定义绘制多边形

支持显示模式的切换：
显示1  this.$refs.ip2.changeShowMode(1)
显示2  this.$refs.ip2.changeShowMode(2)
都显示  this.$refs.ip2.changeShowMode(3)

设置图像边框(加到上层容器)：
        <div class="imagePreview2">
            <ImagePreview2
            />
        </div>
    .imagePreview2 {
        border-radius: 5px;
        /deep/ .wapper {
            .ip {
                border-color: red;
            }
        }
    }



```

## 开发与发布

```
npm install  或  yarn install
yarn serve

npm login
npm run pub
```