svg webtopo原型8 -拖曳

最新推荐文章于 2024-03-27 09:32:21 发布

VIP文章 laputa73

最新推荐文章于 2024-03-27 09:32:21 发布

阅读量2.6k

点赞数

分类专栏： web编程 svg 文章标签： function null javascript opera 算法 ie

本文链接：https://blog.csdn.net/laputa73/article/details/7717403

版权

这回是真正的考验了，要实现设备的鼠标拖曳功能。

这个功能理论上比较简单，但是为了兼容性，几乎吐血。

实现的方法有很多，这里仅列举一种。

核心就在于坐标变换，主要有三点注意

针对ie的embed，需要注意设置wmode="Transparent"属性，这样可以不影响页面的鼠标事件。

再有就是IE/asv不支持offsetX方法，所以需要自行设法计算鼠标点击位置相对设备的坐标。

Ie和opera对clientx的取值不同ie是相对svg元素的坐标，opera是相对整个页面的坐标，因此移动函数采用了不同的算法。

6dev.htm

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>
设备
</title>
 <meta http-equiv="X-UA-Compatible" content="chrome=1">
<!-- legengd.html
 1.显示设备（文字、图片）
 2.拖动
-->
</head>
<script type="text/javascript" language="javascript" src="./js/moveObjs.js"></script>
<script type="text/javascript" language="javascript" src="./js/svgutil.js"></script>
<script type="text/javascript" language="javascript" src="./js/topo.js"></script>

<script>

</script>

<body bgcolor="#ffffff">


<br>
<button οnclick="show()">开始</button><br>
<button οnclick="zoomby(0.5)">缩小2倍cor</button>
<button οnclick="zoomby(2)">放大 2倍cor</button>
<button οnclick="zoom(1,300,300)">还原</button><br>
<button οnclick="showsrc()">源码</button><br>

最低0.47元/天解锁文章

laputa73

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
svg webtopo原型8 -拖曳

这回是真正的考验了，要实现设备的鼠标拖曳功能。这个功能理论上比较简单，但是为了兼容性，几乎吐血。实现的方法有很多，这里仅列举一种。核心就在于坐标变换，主要有三点注意针对ie的embed，需要注意设置wmode="Transparent"属性，这样可以不影响页面的鼠标事件。再有就是IE/asv不支持offsetX方法，所以需要自行设法计算鼠标点击位置相对设备的坐标。Ie和op
复制链接

扫一扫