wanglin2 / markjs Goto Github PK

View Code? Open in Web Editor NEW

85.0 85.0 21.0 7.65 MB

一个插件化的多边形标注库

Home Page: https://wanglin2.github.io/markjs/

JavaScript 77.65% HTML 1.25% Vue 21.10%

javascript mark polygon

markjs's Introduction

hello，我是街角小林 👋

👨‍💻 男，90后，直奔程序员失业年龄；6年+前端，除了前端啥也不会，更惨的是前端会的也不多；热爱前端和开源，更喜欢钱但可惜赚不到。 📧 邮箱（微信同号）：[email protected] ⭐ 公众号：理想青年实验室（二维码↓）

💡 一些有意思的小项目 ↓

💡 原创文章 ↓

markjs's People

Contributors

Stargazers

Watchers

markjs's Issues

this.mark2.updateOpt 无法回显数据

this.mark2.updateOpt 无法回显数据
this.mark2.updateOpt({
value: [{
data: '区域1',
pointArr: [
{ x: 0.5409663865546218, y: 0.16607004643962847 },
{ x: 1.009453781512605, y: 0.19393382352941177 },
{ x: 0.8960084033613446, y: 0.6273703560371517 },
{ x: 0.6039915966386554, y: 0.8502805727554179 },
{ x: 0.39810924369747897, y: 0.5097232972136223 },
{ x: 0.5577731092436975, y: 0.4137480650154799 }
],
fillColor: 'rgba(250,50,57,0.30)',
strokeStyle: { strokeColor: 'red' },
pointStyle: { fillColor: '#FFCC00', strokeColor: '#FFCC00' }
}]
})

单页面正常，组件形式会出现bug

在单个页面的情况下可以正常使用，但是如果放到多页面例如el-tabs的el-tab-pane中就无法正常使用，实例可以正常创建，但是不能正常标注

鼠标悬停样式修改

大佬，请问如何修改鼠标悬停时的填充样式呢

怎么在标注区域显示标签呢？

请问一下怎么在标注区域显示标签呢？

跑起来了，但没有完全跑起来

额，首先我是个实习生，不知道对不对，一开始我也编译不了，看了前面的问题之后跑起来了，现在我赋值了示例的代码，然后是空白的，我删了import之后就有template的内容了，我也不知道是哪一步出的问题，大佬帮看看吧，救救孩子吧

希望添加标注物的缩放，例如图片放大标注

用了缩放mousePlugin，标注的点位置不对

拷贝了markjs-docs/src/components/Demo6.vue 内的代码，加上了Markjs.use(scalePlugin); 实际缩放的时候鼠标单击时顶点出现的位置不对
使用vue3 + vite4 + element-plus

ShapePlugin激活后报错

在shapePlugin激活后，ShapePlugin函数中

else { // 超出数量限制 
            instance.observer.publish('COUNT-LIMIT', curEditingMarkItem)
            setIsCreateMarking(false)
        }

curEditingMarkItem报错，改成instance.getState().curEditingMarkItem后可正常运行。
本人新手，不知为何。

nodejs 16.15
脚手架 create-react-app

用户操作，双击结束操作为何不改为右键退出操作

个人以为画多边形，右键退出更舒适

如何通过输入坐标点的方式新增标注

如何通过输入坐标点的方式新增标注？可以保证输入的坐标点是合法的。

图片插件有问题啊，图片和比例获取不到

image | 图片对象
ratio | 图片实际的宽高与容器宽高的比例
这两个属性你挂载的时机有问题，应该是获取图片成功后挂载
但是源码中
function ImgPlugin(instance) {
// 图片对象
let image = null
// 最终渲染宽高与图片实际宽高的比例
let ratio = 0

instance.image = image
instance.ratio = ratio

}

function loadImage () {
utils.loadImage(opt.img)
.then((img) => {
image = img
imgActWidth = image.width
imgActHeight = image.height
init()
if (!isRefreshImage) {
_resolve()
}
})
.catch((e) => {
instance.observer.publish('IMG-LOAD-ERROR', e)
if (!isRefreshImage) {
_resolve()
}
})
}
你只是更新了保存的临时变量image ，并没有挂载到实例上去，希望确认下