jtopo实现左键框选,右键拖拽(拓扑图)，以及设置成不能拖动

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>jtopo实现左键框选,右键拖拽</title><style type="text/css">body {margin: 0;padding: 0;}#canvas {background: yellowgreen;}</style>
</head><body><canvas id="canvas" width="800" height="400"></canvas><script type="text/javascript" src="./js/jtopo.js"></script><script type="text/javascript">var canvas = document.getElementById('canvas');var stage = new JTopo.Stage(canvas); // 创建一个舞台对象var scene = new JTopo.Scene(stage); // 创建一个场景对象//场景舞台模式// mode(场景舞台模式 normal[默认]：可以点击选中单个节点（按住Ctrl可以选中多个），点中空白处可以拖拽整个画面//    drag: 该模式下不可以选择节点，只能拖拽整个画面//    select: 可以框选多个节点、可以点击单个节点//    edit: 在默认基础上增加了：选中节点时可以通过6个控制点来调整节点的宽、高) document.onmousedown = function (event) {if (event.button == 0) {//鼠标左键scene.mode = "select";} else if (event.button == 2) {//鼠标右键scene.mode = "normal";}}function onMouseDown(event) {if (event.button == 0) {scene.mode = "select";} else if (event.button == 2) {scene.mode = "normal";}}var nodeFrom = new JTopo.Node("from");nodeFrom.setLocation(50, 50);scene.add(nodeFrom);var nodeTo = new JTopo.Node("To");nodeTo.setLocation(100, 100);scene.add(nodeTo);var link = new JTopo.Link(nodeFrom, nodeTo); // 增加连线scene.add(link);</script>
</body>
</html>

左键框选

scene.mousedrag(function(event) {scene.translateX=0;scene.translateY=0;})

jtopo实现左键框选,右键拖拽(拓扑图)，以及设置成不能拖动相关推荐

基于华为云自定义模板的图片操作演示（框选、拖拽）
掘金链接华为云自定义模板识别是服务于AI领域的流程控制系统,我们一起了解下其中一个模块的界面化操作实例.如下图,针对图片的高精度识别,我们需要处理图片的样式以便获得更好的模型训练数据和高精度识别结果 ...
C#怎么判断是鼠标左键单击还是右键单击？
C#怎么判断是鼠标左键单击还是右键单击? 判断方法如下: private void MouseClick(object sender, MouseEventArgs e){ if (e.Button ...
模拟鼠标的左键单击和右键单击
' ------------------------------------------- ' 模拟鼠标的左键单击和右键单击 ' ---------------------------- ...
cesium 鼠标操作习惯修改鼠标左键旋转鼠标右键平移
修改鼠标操作习惯 // 倾斜视图鼠标左键旋转 viewer.scene.screenSpaceCameraController.tiltEventTypes = [ Cesium.CameraEve ...
弹出框的鼠标拖拽事件
几个与定位有关的概念: js: clientX/clientY属性:获得事件发生时鼠标指针在视口中的水平和垂直坐标. screenX/screenY属性:获取鼠标事件发生时鼠标光标相对于整个电脑屏幕的 ...
用python实现识别框选图片字体部分，并分割成单独图片
CSDN问答频道为您的问题找到合适的答案,帮助用户获得可信赖的优质解答原问题来自于CSDN问答频道,该问题来源:https://ask.csdn.net/questions/7415845 问题描述 ...
HTML+CSS+JavaScript实现模态框（可拖拽）
前言模态框是指覆盖在父窗口上的子窗口,但在HTML网页中,并没有父窗口和子窗口的概念.这里是通过可隐藏的遮罩层和一个可隐藏的盒子来实现模态框的效果. 效果演示: 下面开始详细介绍如何实现一个可拖拽的 ...
【vue弹框和div拖拽功能】vue-elementul弹框拖拽功能，移动拖拽功能，普通div拖拽功能【拿来即用，直接复制】
前言这里是通过vue的指令封装好的直接创建一个js文件复制进去,引入一下就搞定了,非常简单 html版本引入vue语法的div和弹框拖拽功能这里是考虑到有时候会在html页面开发的时候也会用到这 ...
as3文本框的动态拖拽和编辑
如今非常多软件都支持了编辑界面的文本拖拽和点击编辑来直接改动数值, 这样便于操作, 并且体验性也好, 抛砖引玉吧于是就用好久没编写的as3来写了一下: 由于用的flash ide写的没有提示, 就临 ...
element UI实现el-dialog（弹框）可拖拽功能（网上借鉴）
话不多说,直入主题 1.第一步,先封装可拖拽代码,我在这把文件命名为el-dragDialog,可放在utils文件下,如下 el-dragDialog文件下有两个js文件,分别是drag.js和in ...

jtopo实现左键框选,右键拖拽(拓扑图)，以及设置成不能拖动

jtopo实现左键框选,右键拖拽(拓扑图)，以及设置成不能拖动相关推荐

最新文章

热门文章