这篇文章主要介绍了vue实现一个矩形标记区域 rectangle marker的方法，帮助大家实现区域标记功能，感兴趣的朋友可以了解下
代码地址：vue-rectangle-mar本文来源gaodai$ma#com搞$$代**码网ker
一、前言
一些cms系统经常会用到区域标记功能，所以写了个用vue实现的矩形标记区域，包含拖拽、放大缩小、重置功能。
二、实现结果
1.初始
2.标记
三、代码实现
<div class="rectangle-marker"> <div class="mark-wrap"> <div class="draw-rect"> <div class="box"> <div id="upleftbtn" class="upleftbtn"></div><div id="uprightbtn" class="uprightbtn"></div><div id="downleftbtn" class="downleftbtn"></div><div id="downrightbtn" class="downrightbtn"></div></div></div> <div class="act-btns"> <button>mark</button> <button>reset</button></div></div></div> .rectangle-marker { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; .mark-wrap { position: relative; .img-responsive { display: inline-block; max-width: 100%; max-height: 100%; } .draw-rect { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; z-index: 99; user-select: none; &.no-event { pointer-events: none; } } } .act-box { margin-top: 10px; display: flex; } .act-btns { position: absolute; right: 0; top: 0; z-index: 199; padding: 0 10px; height: 40px; width: 100px; display: flex; align-items: center; justify-content: center; } .fade-enter-active { animation: hide-and-show .5s; } .fade-leave-active { animation: hide-and-show .5s reverse; } @keyframes hide-and-show { 0% { opacity: 0; } 100% { opacity: 1; } } } .rectangle-marker { .box { position: absolute; width: 0px; height: 0px; opacity: 0.5; z-index: 149; cursor: move; border: 1px solid #f00; .upleftbtn, .uprightbtn, .downleftbtn, .downrightbtn { width: 10px; height: 10px; border: 1px solid steelblue; position: absolute; z-index: 5; background: whitesmoke; border-radius: 10px; } .upleftbtn { top: -5px; left: -5px; cursor: nw-resize; } .uprightbtn { top: -5px; right: -5px; cursor: ne-resize; } .downleftbtn { left: -5px; bottom: -5px; cursor: sw-resize; } .downrightbtn { right: -5px; bottom: -5px; cursor: se-resize; } } }
- 背景图传入，图片自适应处理。
- 定义drag标记为，添加开始标记、重置按钮。
- 创建box区域，不同状态（change、moving、active），对应不同id。
- box可移动距离，计算边界。
- 四角放大缩小的功能。
- 生成结果，精确到6位小数，这样可以使得复原标记区域的时候误差最小。
四、觉得有帮助的，麻烦给个赞哦，谢谢！
以上就是vue实现一个矩形标记区域(rectangle marker)的方法的详细内容，更多关于vue实现矩形标记区域的资料请关注gaodaima搞代码网其它相关文章！
以上就是vue实现一个矩形标记区域(rectangle marker)的方法的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue实现一个矩形标记区域(rectangle marker)的方法
转载请注明原文链接：vue实现一个矩形标记区域(rectangle marker)的方法
