0.0.12 • Published 7 months ago

img-pixi-viewer v0.0.12

Weekly downloads
-
License
-
Repository
-
Last release
7 months ago

image-viewer 组件

基础功能

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

高级功能

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

需求分析

  1. 显示图片:
  • 读取(jpg,png,yuv,raw...)-> 显示图片
  1. 显示PB:
  • 框选区域 -> 统计 -> 发送数据 -> 更新视图
  1. 统计直方图:
  • 框选区域 -> 统计 -> 发送数据 -> 显示直方图

开启直方图统计 -> 选框 -> 统计数据 -> 父组件 开始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

属性名说明类型默认值
imgurl图片地址string''
height显示图片容器的高度number0
width显示图片容器的宽度number0
mask图片底层的蒙版Graphics''

Events

事件名说明类型
onPBstatis开始PB统计string
onHisstatis开启直方图统计number
width显示图片容器的宽度number
mask图片底层的蒙版Graphics

Slots

0.0.12

7 months ago

0.0.11

7 months ago

0.0.10

7 months ago

0.0.9

7 months ago

0.0.8

7 months ago

0.0.7

7 months ago

0.0.6

7 months ago

0.0.5

7 months ago

0.0.4

7 months ago

0.0.3

7 months ago

0.0.2

7 months ago

0.0.1

7 months ago

0.0.0

7 months ago

1.0.4

7 months ago

1.0.3

7 months ago

1.0.2

7 months ago

1.0.1

7 months ago

1.0.0

7 months ago