canvas-anno
Installation
Using npm:
npm install am-canvas-anno
Using
<div id='cannvas_anno'/>
<script>
// 初始化
const element = document.getElementById('cannvas_anno')
const anno = new AnnoCanvas()
anno.init(element,'../example/demo1.jpg')
anno.config({
color:'#00FF00',
lineWidth: 2,
max:4,
paddingX:0,
paddingY:0,
paddingBackground:'rgba(0,0,0,.1)',
fill:'rgba(255, 255, 255, 0.6)',
selectedFill:'rgba(255, 255, 255, 0.8)',
boxShadow:'2 2 1 rgba(0,0,0,.7)',
// 变化触发
onChange:(e) => {
// console.log(e)
},
// 选中触发
onSelect:(index,tag) => {
console.log('选中触发',index,tag)
},
//取消选中触发
deSelect:(index,tag) => {
console.log('取消选中触发',index,tag)
},
// 背景加载/切换完成触发
loaded:(e) => {
console.log('背景图片加载完成')
anno.draw({
dot_line: [{
path: [{x: 10, y: 10}, {x: 400, y: 100}, {x: 400, y: 400}, {x: 100, y: 400}],
close:true,
editAble:false,
describtion:{
text:'1',
color:'#000',
fontSize:16
}
}],
})
},
// 单次绘画完成触发
finished:(e) => {
console.log(e)
},
})
创建绘画
anno.createTarget({
type:'dot_line',
options:{
close:true,
describtion:{
text:'2',
color:'#000',
fontSize:14
}
}
})
</script>
Config
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|
paintBrush | 绘画标记类型 | String | '' | 'line' 'circle' 'closed_line' 'dot_line' 'rect' 'straight_line' |
color | 绘画默认颜色 | String | '#f81d22' | - |
selectedColor | 选中默认颜色 | String | '#008dff' | - |
lineDash | 虚线 | String | "" | 如:"5,25" |
lineWidth | 绘画线条宽度 | Number | 2 | - |
fill | 填充颜色 | String | - | - |
selectedFill | 选中填充颜色 | String | - | - |
dotLineLimit | 点线默认点数 | Number | 4 | - |
hammerAble | 是否可拖拽 | Boolean | false | - |
描述
describtion:{
text:'1',
color:'#000',
fontSize:16
}
Methods
参数 | 说明 | 返回 | 默认值 | 可选值 |
---|
config | 设置配置 | - | - | - |
getData | 获取数据 | tag 坐标 | - | - |
clearData | 清除数据与画板 | - | - | - |
onSelect | 选中触发 | - | - | - |
cancel | 取消绘画 | - | - | - |
resizeConfig
参数 | 说明 | 返回 | 默认值 | 可选值 |
---|
fillStyle | 填充颜色 | - | - | - |
strokeStyle | 边框颜色 | tag 坐标 | - | - |
strokeWidth | 边框宽度 | - | - | - |
width | 点大小 | - | - | - |
accuracy | 最小点位距离 | - | - | - |