想请问一下,在画布上画出了一个网络图由点和线构成,那么改如何拖动这个画布改变位置呢?能不能在canvas这个标签上绑定事件?
3条回答 默认 最新
- 五花漏 2020-05-09 10:51关注
我写了个demo,你看看。
<body style="position: relative;"> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;position:absolute;top:50px;left: 50px;"> Your browser does not support the canvas element. </canvas> <script> var c = document.getElementById("myCanvas"); var cxt = c.getContext("2d"); cxt.moveTo(10,10); cxt.lineTo(150,50); cxt.lineTo(10,50); cxt.stroke(); c.onmousedown = function(args){ var evt = args || event; var StartX = evt.clientX; var StartY = evt.clientY; document.onmousemove = function(ev){ var iEvent = ev||event; let left = iEvent.clientX - StartX; let top = iEvent.clientY - StartY; c.style.left = left + 50 + 'px'; c.style.top = top + 50 +'px'; } document.onmouseup = function(){ document.onmousedown = null; document.onmousemove = null; }; return false; } </script> </body>
解决 无用评论 打赏 举报
悬赏问题
- ¥15 kafka 分区副本增加会导致消息丢失或者不可用吗?
- ¥15 微信公众号自制会员卡没有收款渠道啊
- ¥15 stable diffusion
- ¥100 Jenkins自动化部署—悬赏100元
- ¥15 关于#python#的问题:求帮写python代码
- ¥20 MATLAB画图图形出现上下震荡的线条
- ¥15 关于#windows#的问题:怎么用WIN 11系统的电脑 克隆WIN NT3.51-4.0系统的硬盘
- ¥15 perl MISA分析p3_in脚本出错
- ¥15 k8s部署jupyterlab,jupyterlab保存不了文件
- ¥15 ubuntu虚拟机打包apk错误