img-pixi-viewer v0.0.12

image-viewer 组件

基础功能

• 查看图片
• 放大\缩小
• 拖拽
• 最佳大小&位置
• 左右旋转
• 水平&垂直翻转

高级功能

• 拖拽直方图统计
• 拖拽Mask统计

需求分析

1. 显示图片：

• 读取（jpg，png，yuv，raw...）-> 显示图片

2. 显示PB：

• 框选区域 -> 统计 -> 发送数据 -> 更新视图

3. 统计直方图：

• 框选区域 -> 统计 -> 发送数据 -> 显示直方图

开启直方图统计 -> 选框 -> 统计数据 -> 父组件 开始PB统计 -> 选框 -> 统计数据 -> 父组件

面向对象

old : 舞台stage -> container -> Sprite -> Mask new ImgViewer: 1.创建stage 2.创建container 3.判断container child是否为空 3.删除child 4.new Sprite -> container 5.new Mask -> container

初次加载没有图片 首次加载图片 第二次加载图片

mask

基础用法

 <Viewer :imgurl="img" :height="height" :width="width" />

添加Mask

 <Viewer :imgurl="img" :height="height" :width="width" :mask="mask" />

API​

Attributes

Events

Slots