我有一个CSS4颜色关键字在HSL空间中分布的SVG可视化,链接在这里:https://meyerweb.com/eric/css/colors/hsl-dist.html
我最近添加了通过鼠标滚轮进行缩放和通过鼠标点击并拖动进行平移的功能。我能够使用
例如,假设我将图像缩放并拖动进行平移,并且我向左抛出鼠标并稍微向下。
(注意:我知道有这种情况的库,但我有意使用原始JS代码,以便更多地了解SVG和JS。所以,请不要发布“lol just use library X”然后就此结束。谢谢!)
编辑添加:被要求发布代码。发布整个JS似乎过长,但这是在
如果需要更多信息,请查看链接页面的源代码;所有JavaScript都在页面顶部。除了一个仅包含可视化所需的HSL值和颜色名称的文件外,没有外部文件。
matrixTransform
、.getScreenCTM()
和.inverse()
将屏幕空间中的点转换为SVG坐标空间,这得益于我在网上找到的示例代码,但我该如何转换拖动期间的鼠标移动?目前,我只是通过从event
获取的X和Y值来移动viewBox
坐标,这意味着当缩放时,图像拖动速度比鼠标移动速度快。例如,假设我将图像缩放并拖动进行平移,并且我向左抛出鼠标并稍微向下。
event.movementX
返回-37
,而event.movementY
返回6
。 我该如何确定这相当于SVG坐标中的多远,以便正确移动viewBox
坐标?(注意:我知道有这种情况的库,但我有意使用原始JS代码,以便更多地了解SVG和JS。所以,请不要发布“lol just use library X”然后就此结束。谢谢!)
编辑添加:被要求发布代码。发布整个JS似乎过长,但这是在
mousemove
事件上触发的函数:function dragger(event) {
var target = document.getElementById('color-wheel');
var coords = parseViewBox(target);
coords.x -= event.movementX;
coords.y -= event.movementY;
changeViewBox(target,coords);
}
如果需要更多信息,请查看链接页面的源代码;所有JavaScript都在页面顶部。除了一个仅包含可视化所需的HSL值和颜色名称的文件外,没有外部文件。