通过组合一些CSS和Jquery UI / draggable,我创建了平移图像的能力,并且使用一些额外的JS,您现在可以缩放图像 .
我遇到的问题是,如果放大图像的左上角是固定的,正如您所期望的那样 . 我想要的是图像保持中心(基于当前的平移),使图像的中间位于容器的中间,同时变大 .
我已经为此编写了一些代码但是没有用,我希望我的数学是错误的 . 有人可以帮忙吗?
我希望它像this那样工作 . 滚动到图像时,它会根据当前平移保持图像居中,而不是从角落缩小 .
HTML:
<div id="creator_container" style="position: relative; width: 300px; height: 400px; overflow: hidden;">
<img src="/images/test.gif" class="user_image" width="300" style="cursor: move; position: absolute; left: 0; top: 0;">
</div>
Javascript:
$("#_popup_creator .user_image").bind('mousewheel', function(event, delta) {
zoomPercentage += delta;
$(this).css('width',zoomPercentage+'%');
$(this).css('height',zoomPercentage+'%');
var widthOffset = (($(this).width() - $(this).parent().width()) / 2);
$(this).css('left', $(this).position().left - widthOffset);
});
1 回答
简而言之,您需要使变换矩阵按比例缩放与图像相同,然后使用该矩阵变换图像的位置 . 如果这个解释对你来说是完整的希望,请查看“图像变换”和“矩阵数学” .
这个页面的开头是一个非常好的资源,即使它是一种不同的编程语言:http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/geom/Matrix.html
无论如何,我已经在我自己的一些项目中实现了这些方法 . 这是我编写的函数放大函数,它以您想要的方式运行:
请注意命令"new Vector.create()"和"Matrix.I(3)" . 那些来自JavaScript矢量/矩阵数学库http://sylvester.jcoglan.com/
然后注意"transformPoint()" . 这是我使用sylvester.js实现的ActionScript链接中的一个函数(加上http://wxs.ca/js3d/上的提示)
对于我写的全套函数: