# AILabel.js

背景：在前端開發過程中難免遇到針對圖片的縮放平移；以及在圖片上進行矢量數據、文本、標注的展示；如果你有上面的任何需求，恭喜你，找到組織了....<br/>

在此背景下，AILabel.js出生了

### 相關資料

npm下載地址：[ailabel](ailabel)<br/>

github地址: [dingyang9642/AILabel](dingyang9642/AILabel)

求star<br/>

api文檔(待補充): [AILabel](https://dingyang9642.github.io/AILabel/#/)<br/>

加入qq群：378301400

### 背景-功能

> 1. 解決圖片瀏覽（無極縮放、平移）

> 2. 矢量數據、文本、標注展示

> 3. 矢量數據繪制、編輯

> 4. 標注形式：矩形、多邊形、涂抹、折線、打點、文本text、標注marker

### 示例圖






### 示例Demo

[- 要素](Document)<br/>

[- 注記](Document)<br/>

[- 文本](Document)<br/>

[- 繪制編輯](Document)<br/>

[- 矩形編輯](Document)<br/>

[- 要素hover](Document)<br/>

[- 圖像&縮略圖&比例尺](Document)<br/>

### get started

htmlcssjs部分

```javascript

// 樣式聲明

<style>

#hello-map {

width: 500px; // 必須

height: 400px; // 必須

position: relative; // 必須

border: 1px solid red;

cursor: pointer;

}

</style>

// 容器聲明

<div id="hello-map"></div>

// js聲明-容器聲明（參數：zoom: 縮放比; {cx: cy:}：初始中心點位置；zoomMax、zoomMin：縮放的比例限制）

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);

***至此、已完成首個簡單的hello-map的使用***

```

### 矢量數據(Feture)展示

```javascript

// 常用樣式聲明

const gFetureStyle = new AILabel.Style({strokeColor: '#0000FF'});

// 矢量層實例添加

let gFeatureLayer = new AILabel.Layer.Feature('featureLayer', {zIndex: 2, transparent: true});

gMap.addLayer(gFeatureLayer);

// 矢量要素實例添加

const fea = new AILabel.Feature.Polygon('id', [

{x: 10, y: 10},

{x: 50, y: 10},

{x: 40, y: 50},

{x: 20, y: 60},

{x: 10, y: 10}

], {name: '中國'}, gFetureStyle);

gFeatureLayer.addFeature(fea);

```

### 文本數據(Text)展示

```javascript

// 常用樣式聲明

const gTextStyle = new AILabel.Style({strokeColor: '#0000FF'});

// 文本層實例添加

let gTextLayer = new AILabel.Layer.Text('textLayer', {zIndex: 2});

gMap.addLayer(gTextLayer);

// 文本要素實例添加

const text = new AILabel.Text('id', {

pos: {x: 100, y: 100},

offset: {x: 0, y: 0},

width: 100,

text: '中國'

}, gTextStyle);

gTextLayer.addText(text);

```

### 標注數據(Marker)展示

```javascript

// 不需要聲明markerLayer標注圖層，有且只有一個markerLayer，可通過gMap.mLayer來獲取

// marker對象實例添加

const marker = new AILabel.Marker('name-中國', {

src: './marker.png',

x: 0,

y: 0,

offset: {x: -32, y: -32}

});

// 注冊監聽事件刪除標注

marker.regEvent('click', function () {

gMap.mLayer.removeMarker(this);

});

gMap.mLayer.addMarker(marker);

```

### 各類事件監聽（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);});

...

```

### 矢量數據繪制、編輯（點、線、面、涂抹Mask）

```

// 常用樣式聲明

const gFetureStyle = new AILabel.Style({strokeColor: '#0000FF'});

// 設置當前操作模式為‘drawRect’, 瀏覽狀態對應mode為'pan'

gMap.setMode('drawRect', gFetureStyle);

// 矢量層實例添加

let gFeatureLayer = new AILabel.Layer.Feature('featureLayer', {zIndex: 2, transparent: true});

gMap.addLayer(gFeatureLayer);

// 繪制完成事件監聽

gMap.events.on('geometryDrawDone', function (type, points) {

// 生成元素唯一標志（時間戳）

const timestamp = new Date().getTime();

// 元素添加展示

let fea = new AILabel.Feature.Polygon(`feature-${timestamp}`, points, {

name: '中國'

}, gFetureStyle);

gFeatureLayer.addFeature(fea);

});

// 因為自帶編輯功能，故需要以下代碼

gMap.events.on('geometryEditDone', (type, activeFeature, points) => {

activeFeature.update({points});

activeFeature.show();

});

```

如有其他需要，加入qq群：378301400

總結

以上是生活随笔為你收集整理的js br不生效_前端标注工具-AILabel.js的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。