Question

也许这是一种不寻常的做事方式，但我正在创建一个交互式地图，其中嵌入了实际地图图像中的地标标记（带有数字的彩色圆圈）。图像位于div中，可让您使用鼠标和鼠标滚轮进行平移和缩放。我正在使用CSS变换来完成平移和缩放。这部分工作得很好。

问题是我在地图上有90个地标需要能够让用户点击它们并打开工具提示/弹出窗口以获取更多信息。我正在使用图像映射并指定坐标来完成此操作。这一切都很有效。

但是，我希望用户能够将鼠标悬停在图像地图区域上，并在主地图图像的顶部显示备用图像，以便有效地突出显示＆＃34;悬停的标志性圈子。然后，当他们点击地标时，我会使用相同的替代图像来显示＆＃34;突出显示＆＃34;所选地标的圆圈。

我通过使用单个div进行悬停图像显示，将其从画布上移开然后应用CSS变换将其移动到位并在用户将鼠标悬停在图像映射区域上时显示正确的背景图像。

除了一个非常小的问题外，这一切都在起作用：

我通过jQuery将变换值传递给CSS，并且在应用变换时将它们舍入到3个小数位。这里是javascript用于设置示例转换。

＆＃13;

$(function(){
	$('#landmarkHighlightSelected').css({
	'transform-origin': '0px 0px 0px',
	'transform': 'translate(121.11172485351563px, 335.38427734375000px) scale(1)', 
	});	 
});

＆＃13;

当我在Chrome开发工具中检查转换时，我看到转换值已转换为3个小数位（应用舍入）。矩阵值列出如下：

matrix(1, 0, 0, 1, 112.112, 335.384)

＆＃34;正常＆＃34;在这种情况下，这可能并不重要。但我得到的效果是＆＃34;突出显示＆＃34;移动到位的div是＆＃34;关闭＆＃34;它应该在哪里，但取决于计算结果考虑到图像平移/缩放值，我将得到一个＆＃34; shift＆＃34;效果，你可以看到＆＃34;突出显示＆＃34; div与其后面调整大小/移动的地图图像中的地标略有偏移。

所以我看到的是CSS转换限制在3位小数？是对的吗？有没有办法让他们接受更多的小数位？

我明白我正在做的事情有点不正统，并且通过嵌入＆＃34; off＆＃34;在地图图像中显示状态地标标记，它允许平移和缩放将地标移动到浏览器似乎无法渲染的值。

但我采用这种方法是因为尝试在浏览器中移动90个div，允许平移和缩放，以防用户将鼠标移到它上面，因为代码试图重新计算，导致移动中出现巨大的抖动/拖动/延迟响应当用户移动东西时，所有这些div的位置。

任何有关这方面的帮助或见解都会如此受到赞赏。我已经无处可去了一个多星期，并且发现它是3小数位的限制导致渲染的div看起来移位。

非常感谢，珍妮

CSS 2D变换矩阵小数位限制

0 个答案: