实现jtopo缩放后,鼠标拖放“指哪儿放哪”

4 篇文章 0 订阅
2 篇文章 0 订阅
        想必大家都已经发现了,jtopo有个不大不小的诟病,就在放大或缩小后,拖放到画布上的节点并不会在鼠标松开的位置绘制,这让博主也头疼了一阵子,那么如何来解决这一问题呢?和大家一样,遇到不会的问题,先百度……谷歌……搜了一大圈,然并卵,到头来还是没有找到一个合适的解决方案,最终只能靠自己实现了,好了,废话不多说,直接进入主题,实现后的效果如下:

        先说说主要的实现思路,一开始博主和你们一样,想要一步到位,试着计算鼠标所在位置的scene的坐标,但各种尝试后都失败了,最后只好采用了一种迂回的思想,先创建,再移动到想要的位置,创建好之后先让隐藏起来,等移动到指定位置之后再呈现出来,这样给人的错觉是直接绘制到了鼠标松开的位置,下面是实现步骤。
第一步,先定义一个全局变量,用来存放创建的新的node。
第二步,在创建新节点后给全局变量newer赋值,并将新节点的visible属性设置为false(这里主要是为了隐藏新节点转移到指定位置的肉眼可见过程)。
创建节点是在 TopologyEditor对象的扩展方法 drag中,如下图:
找到节点创建完成加入到scene的地方,设置节点的visible属性,并将新创建的节点赋值到newer,这里需要注意的是如果scaleX等于1,也就是说没有缩放的时候,是不需要这样处理的,所以要过滤掉。
第三步,找到scene的mousemove事件,给新节点设置新的坐标信息,并显示出来,清空全局变量,具体改动如下:
好了,完成以上三步之后,你的jtopo已经具备缩放后,“指哪儿放哪”的功能了,还有问题的小伙伴们别忘了留言区见哦。。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
jTopo是一个开源的基于HTML5 Canvas的JavaScript拓扑图形绘制库。jTopo在线编辑器是基于jTopo库开发的一个能够实现在线拓扑图编辑的工具。 jTopo在线编辑器具有以下特点和功能: 1. 界面友好:jTopo在线编辑器拥有简单美观的界面设计,用户可以通过直观的操作进行拓扑图的编辑。 2. 功能丰富:jTopo在线编辑器提供了多种拓扑图元素,包括节点、连线、分组等,用户可以通过拖拽、缩放、编辑等功能进行定制化拓扑图的创建和修改。 3. 自定义样式:jTopo在线编辑器支持用户自定义拓扑图元素的样式,包括节点的形状、大小、颜色、边框等,用户可以根据实际需求自由调整拓扑图的外观。 4. 支持交互:jTopo在线编辑器可以绑定各种事件,实现用户与拓扑图的交互,如拖拽节点、点击节点等,可根据事件触发执行自定义的函数。 5. 数据存储:jTopo在线编辑器提供了数据导入和导出的功能,用户可以将拓扑图的数据保存为JSON格式或导入已有的拓扑图数据进行编辑。 6. 浏览器兼容性:jTopo在线编辑器兼容主流的浏览器,并在移动设备上也能够良好地运行。 jTopo在线编辑器通过其强大的功能和便捷的操作,为用户提供了一个方便快捷的拓扑图编辑工具,可广泛应用于网络拓扑、流程图、组织结构图等领域,帮助用户简化拓扑图的创建和修改过程,提升工作效率。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不脱发的牧码人

你的鼓励将是我前进的最大动力。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值