ailabel - npm Package Compare versions

Comparing version 3.0.2 to 3.0.3

package.json

 {
   "name": "ailabel",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "description": "### 背景-功能",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

 # AILabel.js
+背景：在前端开发过程中难免遇到针对图片的缩放平移；以及在图片上进行矢量数据、文本、标注的展示；如果你有上面的任何需求，恭喜你，找到组织了....<br/>
+在此背景下，AILabel.js出生了
 
+### 相关资料
+
+npm下载地址：[https://www.npmjs.com/package/ailabel](https://www.npmjs.com/package/ailabel)<br/>
+github地址:  [https://github.com/dingyang9642/AILabel](https://github.com/dingyang9642/AILabel)<br/>
+api文档(待补充):  [https://dingyang9642.github.io/AILabel/#/](https://dingyang9642.github.io/AILabel/#/)<br/>
+
+
 ### 背景-功能
@@ -7,14 +16,22 @@
 > 2. 矢量数据、文本、标注展示
-> 3. 矢量数据绘制、编辑（目前支持矩形，后续会不断拓展补充）
+> 3. 矢量数据绘制、编辑
 > 4. 标注形式：矩形、多边形、涂抹、折线、打点、文本text、标注marker
 
-### 版本更新记录
-gdbox更名AILabel
+### 示例图
+<img width="350" src="https://raw.githubusercontent.com/dingyang9642/AILabel/master/docs/files/point.gif"><img width="350" src="https://raw.githubusercontent.com/dingyang9642/AILabel/master/docs/files/polyline.gif"><img width="350" src="https://raw.githubusercontent.com/dingyang9642/AILabel/master/docs/files/rect.gif"><img width="350" src="https://raw.githubusercontent.com/dingyang9642/AILabel/master/docs/files/polygon.gif"><img width="350" src="https://raw.githubusercontent.com/dingyang9642/AILabel/master/docs/files/mask.gif">
 
-### 示例
+### 示例Demo
 
-### get started（Demo/img文件夹）
+  [- 要素](http://www.gdbox.vip/gdbox/demo/feature)<br/>
+  [- 注记](http://www.gdbox.vip/gdbox/demo/marker)<br/>
+  [- 文本](http://www.gdbox.vip/gdbox/demo/text)<br/>
+  [- 绘制编辑](http://www.gdbox.vip/gdbox/demo/drawFeature)<br/>
+  [- 矩形编辑](http://www.gdbox.vip/gdbox/demo/editRect)<br/>
+  [- 要素hover](http://www.gdbox.vip/gdbox/demo/hover)<br/>
+  [- 图像&缩略图&比例尺](http://www.gdbox.vip/gdbox/demo/img)<br/>
 
+### get started
+
 html\css\js部分
-```
+```javascript
     // 样式声明
@@ -35,5 +52,6 @@ <style>
     // js声明-容器声明（参数：zoom: 缩放比; {cx: cy:}：初始中心点位置；zoomMax、zoomMin：缩放的比例限制）
-    let gMap = new AILabel.Map('hello-map', {zoom: 650, cx: 0, cy: 0, zoomMax: 650 * 10, zoomMin: 650 / 10});
-    // 图片层实例\添加（参数：img: 图片路径，支持base64; {w: 650, h: 445}：图片大小）
-    let gImageLayer = new AILabel.Layer.Image('img', 'http://pic2.ooopic.com/12/29/07/36b1OOOPICa1.jpg', {w: 650, h: 445}, {zIndex: 1});
+    const gMap = new AILabel.Map('hello-map', {zoom: 1080, cx: 0, cy: 0, zoomMax: 650 * 10, zoomMin: 650 / 10, autoPan: true, drawZoom: true});
+
+    // 图片层实例\添加
+    const gImageLayer = new AILabel.Layer.Image('img', '../../imgs/demo.jpeg', {w: 1080, h: 720}, {zIndex: 1});
     gMap.addLayer(gImageLayer);
@@ -44,4 +62,4 @@
 
-### 矢量数据(Feture)展示（Demo/feature文件夹）
-```
+### 矢量数据(Feture)展示
+```javascript
     // 常用样式声明
@@ -65,4 +83,4 @@ const gFetureStyle = new AILabel.Style({strokeColor: '#0000FF'});
 
-### 文本数据(Text)展示（Demo/text文件夹）
-```
+### 文本数据(Text)展示
+```javascript
     // 常用样式声明
@@ -79,3 +97,3 @@ const gTextStyle = new AILabel.Style({strokeColor: '#0000FF'});
         offset: {x: 0, y: 0},
-        width: 100, // maxwidth
+        width: 100,
         text: '中国'
@@ -86,6 +104,5 @@ }, gTextStyle);
 
-### 标注数据(Marker)展示（Demo/marker文件夹）
-```
+### 标注数据(Marker)展示
+```javascript
     // 不需要声明markerLayer标注图层，有且只有一个markerLayer，可通过gMap.mLayer来获取
-
     // marker对象实例\添加
@@ -105,8 +122,23 @@ const marker = new AILabel.Marker('name-中国', {
 
-### hover事件监听（Demo/hover文件夹）
+### 各类事件监听（mouse、hover、boundsChanged、resize等各类事件）
+```javascript
+// mouseDown：wxy => {}
+// mouseMove：wxy => {}
+// geometryEditing：(type, feature, newPoints) => {}
+// geometryEditDone：(type, feature, newPoints) => {}
+// geometryDrawDone：(type, points) => {}
+// geometryRemove: (type, feature) => {} 【目前只针对点数据】
+// featureHover：feature => {}
+// featureSelected：feature => {}
+// featureStatusReset：() => {}
+// boundsChanged() => {}
+// resize() => {}
+gMap.events.on('mouseDown', xy => {console.log('xy');});
+gMap.events.on('boundsChanged', () => {console.log('boundsChanged');});
+gMap.events.on('featureHover', feature => {console.log(feature);});
+...
+
 ```
-    矢量图形默认自带hover效果（在原图形基础之上加宽边框显示）
-```
 
-### 矢量数据绘制、编辑——矩形／多边形
+### 矢量数据绘制、编辑（点、线、面、涂抹Mask）
 ```
@@ -140,16 +172,2 @@ // 常用样式声明
 
-### 矢量数据编辑——矩形/多边形
-```
-    // 示例同drawRect，但此处添加‘编辑中’事件监听，供开发者在图形编辑过程中进行自定义事件
-    gMap.events.on('geometryEditing', function (type, feature, points) {
-        if (!gMap.mLayer) return;
-        const marker = gMap.mLayer.getMarkerById(`marker-${feature.id}`);
-        if (!marker) return;
-        const bounds = AILabel.Util.getBounds(points);
-        const leftTopPoint = bounds[0]; // 边界坐上角坐标
-        marker.update({x: leftTopPoint.x, y: leftTopPoint.y});
-    });
-```
-
-
-如有其他需要，请联系我[e-mail]
+如有其他需要，加入qq群：378301400

No alert changes

Improved metrics

Total package byte prevSize

93988

increased by1.45%

Number of lines in readme file

166

increased by12.16%

No dependency changes