给konva加个刻度尺
2024-04-22 17:05:30
给konva加个刻度尺
最近在用konva做一些，一开始写了不少辅助函数。帮助自己给物体定位 ，现在贡献出来给大家用。
给图层增加刻度尺
顾名思义就是加个刻度显示，效果如下：
代码：
第一个参数时layer，第二个是精度，返回一个layer
stage.add(HelperLayer(deviceUpLayer, 50));
全部代码如下：
export function HelperLayer(layer, precision = 50) {const height = layer.height();const width = layer.width();const offset = {x: layer.offsetX(), y: layer.offsetY()}const littleLine = precision / 10;//辅助网格层let helperLayer = new Konva.Layer();const x = new Konva.Arrow({points: [offset.x, offset.y, width - offset.y, offset.y],stroke: 'red',strokeWidth: 2,lineCap: 'round',lineJoin: 'round',fill: 'black',})for (let j = 1; j < 10; j++) {helperLayer.add(new Konva.Line({points: [offset.x + j * littleLine, offset.y, offset.x + j * littleLine, j === 5 ? offset.x + 15 : offset.x + 10],stroke: '#48f3cc',strokeWidth: 1,}))}const xLabel = new Konva.Text({x: width - 20,y: 0,text: 'x',fontSize: 20,fill: 'yellow',})const y = new Konva.Arrow({points: [offset.x, offset.y, offset.x, height - offset.x],stroke: 'red',fill: 'black',strokeWidth: 2,lineCap: 'round',lineJoin: 'round',})for (let j = 1; j < 9; j++) {helperLayer.add(new Konva.Line({points: [offset.x, offset.y + j * littleLine, j === 5 ? offset.y + 15 : offset.y + 10, offset.y + j * littleLine],stroke: '#48f3cc',strokeWidth: 1,}))}const yLabel = new Konva.Text({x: 10,y: height - 20,text: 'y',fontSize: 20,width: 100,fill: 'yellow',})helperLayer.add(x, y, xLabel, yLabel);helperLayer.add(new Konva.Text({x: offset.x,y: offset.y,text: "0,0",fontSize: 10,fill: 'yellow',}))// y轴刻度for (let i = 1; i < Math.floor(height / precision); i++) {helperLayer.add(new Konva.Line({points: [offset.x, i * precision + offset.y, 25, i * precision + offset.y],stroke: 'red',strokeWidth: 1,}))for (let j = 1; j < 9; j++) {helperLayer.add(new Konva.Line({points: [offset.x, i * precision + offset.y + j * littleLine, j === 5 ? offset.y + 15 : offset.y + 10, i * precision + offset.y + j * littleLine],stroke: '#48f3cc',strokeWidth: 1,}))}helperLayer.add(new Konva.Text({x: offset.x,y: i * precision + offset.y - 10,text: '' + i * precision,fontSize: 10,fill: 'yellow',}))}// x轴刻度for (let i = 1; i < Math.floor(width / precision); i++) {helperLayer.add(new Konva.Line({points: [i * precision + offset.x, offset.y, i * precision + offset.x, 25],stroke: 'red',strokeWidth: 1,}))for (let j = 1; j < 9; j++) {helperLayer.add(new Konva.Line({points: [offset.x + i * precision + j * littleLine, offset.y, offset.x + i * precision + j * littleLine, j === 5 ? offset.x + 15 : offset.x + 10],stroke: '#48f3cc',strokeWidth: 1,}))}helperLayer.add(new Konva.Text({x: i * precision + offset.x - 10,y: offset.y,text: '' + i * precision,fontSize: 10,fill: 'yellow',}))}return helperLayer;
}
拖动显示坐标
效果如下，当你做拖动元素的时候会自动显示该元素的坐标。
实现如下：
第一个参数是需要拖动的元素，第二个参数是元素所在的图层，无返回值
function showCoord(node, layer) {node.on('dragmove', function (event) {if (event.target.coord) {event.target.coord.destroy()}event.target.coord = new Konva.Text({x: event.target.attrs.x,y: event.target.attrs.y + 10,text: `(${event.target.attrs.x},${event.target.attrs.y})`,fontSize: 20,fill: '#bcef63',});layer.add(event.target.coord);});
}
总结
代码很简单，其实也可以更近一步，但是我犯懒了。# 给konva加个刻度尺
最近在用konva做一些，一开始写了不少辅助函数。帮助自己给物体定位 ，现在贡献出来给大家用。
给图层增加刻度尺
顾名思义就是加个刻度显示，效果如下：
代码：
第一个参数时layer，第二个是精度，返回一个layer
stage.add(HelperLayer(deviceUpLayer, 50));
全部代码如下：
export function HelperLayer(layer, precision = 50) {const height = layer.height();const width = layer.width();const offset = {x: layer.offsetX(), y: layer.offsetY()}const littleLine = precision / 10;//辅助网格层let helperLayer = new Konva.Layer();const x = new Konva.Arrow({points: [offset.x, offset.y, width - offset.y, offset.y],stroke: 'red',strokeWidth: 2,lineCap: 'round',lineJoin: 'round',fill: 'black',})for (let j = 1; j < 10; j++) {helperLayer.add(new Konva.Line({points: [offset.x + j * littleLine, offset.y, offset.x + j * littleLine, j === 5 ? offset.x + 15 : offset.x + 10],stroke: '#48f3cc',strokeWidth: 1,}))}const xLabel = new Konva.Text({x: width - 20,y: 0,text: 'x',fontSize: 20,fill: 'yellow',})const y = new Konva.Arrow({points: [offset.x, offset.y, offset.x, height - offset.x],stroke: 'red',fill: 'black',strokeWidth: 2,lineCap: 'round',lineJoin: 'round',})for (let j = 1; j < 9; j++) {helperLayer.add(new Konva.Line({points: [offset.x, offset.y + j * littleLine, j === 5 ? offset.y + 15 : offset.y + 10, offset.y + j * littleLine],stroke: '#48f3cc',strokeWidth: 1,}))}const yLabel = new Konva.Text({x: 10,y: height - 20,text: 'y',fontSize: 20,width: 100,fill: 'yellow',})helperLayer.add(x, y, xLabel, yLabel);helperLayer.add(new Konva.Text({x: offset.x,y: offset.y,text: "0,0",fontSize: 10,fill: 'yellow',}))// y轴刻度for (let i = 1; i < Math.floor(height / precision); i++) {helperLayer.add(new Konva.Line({points: [offset.x, i * precision + offset.y, 25, i * precision + offset.y],stroke: 'red',strokeWidth: 1,}))for (let j = 1; j < 9; j++) {helperLayer.add(new Konva.Line({points: [offset.x, i * precision + offset.y + j * littleLine, j === 5 ? offset.y + 15 : offset.y + 10, i * precision + offset.y + j * littleLine],stroke: '#48f3cc',strokeWidth: 1,}))}helperLayer.add(new Konva.Text({x: offset.x,y: i * precision + offset.y - 10,text: '' + i * precision,fontSize: 10,fill: 'yellow',}))}// x轴刻度for (let i = 1; i < Math.floor(width / precision); i++) {helperLayer.add(new Konva.Line({points: [i * precision + offset.x, offset.y, i * precision + offset.x, 25],stroke: 'red',strokeWidth: 1,}))for (let j = 1; j < 9; j++) {helperLayer.add(new Konva.Line({points: [offset.x + i * precision + j * littleLine, offset.y, offset.x + i * precision + j * littleLine, j === 5 ? offset.x + 15 : offset.x + 10],stroke: '#48f3cc',strokeWidth: 1,}))}helperLayer.add(new Konva.Text({x: i * precision + offset.x - 10,y: offset.y,text: '' + i * precision,fontSize: 10,fill: 'yellow',}))}return helperLayer;
}
拖动显示坐标
效果如下，当你做拖动元素的时候会自动显示该元素的坐标。
实现如下：
第一个参数是需要拖动的元素，第二个参数是元素所在的图层，无返回值
function showCoord(node, layer) {node.on('dragmove', function (event) {if (event.target.coord) {event.target.coord.destroy()}event.target.coord = new Konva.Text({x: event.target.attrs.x,y: event.target.attrs.y + 10,text: `(${event.target.attrs.x},${event.target.attrs.y})`,fontSize: 20,fill: '#bcef63',});layer.add(event.target.coord);});
}
总结
代码很简单，其实也可以更近一步，但是我犯懒了。
给konva加个刻度尺相关推荐
- CGContextRef绘图－iOS球形波浪加载进度控件－HcdProcessView详解
简书也有发布:http://www.jianshu.com/p/20d7... <iOS球形波浪加载进度控件-HcdProcessView>这篇文章已经展示了我在项目中编写的一个球形进度加 ...
- Qt Creator加States
Qt Creator加States 加States 创建States 设置默认状态 申请States 逻辑运算符摘要 条件的例子 使用状态 使用SCXML状态机 各States之间的动画过渡 加Sta ...
- Konva Vue当中的一些技术心得
Konva是非常优秀的Canvas操作库,也做了React和Vue等框架当中的适配,不过官方文档中的信息给的很少,经过了一些摸索. 先推荐一个国人弄的Konva的中文文档:http://konvajs ...
- android自定义刻度线,Android自定义控件之刻度尺控件
今天我做的是一个自定义刻度尺控件,由于项目需求需要使用刻度尺那样滑动选择,由于对自定义控件的认识还不够深入,于是花了一周多时间才把这个控件给整出来,也是呕心沥血的经历啊,也让我对自定义控件有了自己的认 ...
- android自定义起止时间的时间刻度尺,Android中自定义RecyclerView如何实现不固定刻度的刻度尺...
Android中自定义RecyclerView如何实现不固定刻度的刻度尺 发布时间:2020-07-17 16:50:28 来源:亿速云 阅读:116 作者:小猪 这篇文章主要讲解了Android中自 ...
- 自定义RecyclerView实现不固定刻度的刻度尺
##不均匀刻度效果图 ##等比例刻度效果图 实现功能目前 1.实现类似日期/分类等大小不固定的水平刻度尺效果 2.实现标准刻度尺效果 3.监听RecyclerView滑动时居中条目 4.去掉边缘阴影 ...
- uniapp二次封装slider滑块实现刻度尺设置全局页面字体大小
前言 uniapp没有现成的刻度尺滑块实现调整字体大小的功能,通过找到u-view的slider滑块来实现刻度尺方式设置全局字体大小的二次封装. 总体思路:通过刻度尺的方式选择用户合适的字体效果,上面 ...
- 微信小程序实现带刻度尺滑块
2019独角兽企业重金招聘Python工程师标准>>> 效果图 场景 当一屏显示不下,例如年龄体重选择,金额选择等大区间需要的选择器,相比自带的picker要直观一些. 思路: 先画 ...
- konva系列教程2：绘制图形
大家好,我是前端西瓜哥,今天继续学习 konva. konva 库为我们提供了很多基础的图形,我们来看看具体都有哪些. 绘制矩形(Rect) // 舞台对象,会找到对应元素,在其下创建 canvas ...
最新文章
- Wireshark运算符!=无法正常工作
- 2016年，新的开始
- 【HTTPS】Let's Encrypt certbot renew
- 工业以太网交换机与网络交换机的区别
- Base64编码详解及其变种(解决加号在URL变空格问题）
- latex中设置标题左对齐
- Jquery第一章表格新增功能课后练习第二节2/2
- 分享6款国内、国外开源PHP轻论坛CMS程序
- MTK MT6589平台射频调试方法
- PyQt5 clicked和clicked[bool]信号区别/setCheckable()的应用
- MSSQL 2000 823错误原因分析及数据恢复方案
- 「开发者说」钉钉连接器+OA审批实现学校学生假勤场景数字化
- Flutter流畅性fps计算
- 如何将iPad用作Mac的第二屏幕
- 「领域驱动设计」DDD,六边形架构，洋葱架构，整洁架构，CQRS的整合架构
- 共享充电宝投放餐饮行业收益如何？
- Andwobble破解
- jQuery过滤器：筛选jquery对象数组中的DOM对象
- tf.range详解
- 【pandas】将单元格中的多个数据拆分为多行数据(explode)，以csv文件为源文件进行处理