javascript - 如何使用 CSS3/HTML5 或 Javascript 根据 div 位置创建 zoom 'windows' 显示图像的缩放部分？

Question

我现在正在开发一个非矩形裁剪工具，我希望每个裁剪点都有一个缩放 View 。在下面的示例图像中，裁剪点是由红线连接的正方形的 Angular 。

Early polygonal crop

这些方 block 是由 JSPlumb 创建的可拖动 div .这些 div 看起来像这样:

<div id="bottomRight" class="item _jsPlumb_endpoint_anchor_ ui-draggable" style="top:
335.3999938964844px; left: 549px;">
</div>

我想要图像周围有四个缩放窗口，我可以在其中看到每个 Angular 的放大 View ，但我只能找到有关围绕鼠标进行缩放的资源。理想情况下，这些 View 应该是相同大小的正方形，以 jsPlumb 端点的当前位置为中心。

我找到了 CSS Zoom 属性，但它似乎已经过时了。我知道答案可能在 css3 的 transform.scale 属性中，但我不知道如何继续。虽然我更喜欢 css/html 解决方案，但我绝不反对使用一些 JS 来完成工作。感谢任何提示或见解!

Answer 1

我认为仅 css 是不可能的，即。我认为，您将需要一些 Jquery(或 javascript)，希望我能理解您的问题:

我会在页面上放置一个类为“zoom-container”的 div，用于保存缩放和移动的图像。

我认为对于转换中的 matrix():您需要根据 JavaScript 更改值。

这是一个简单的 fiddle和代码:

<img src='http://images.all-free-download.com/images/graphiclarge/cute_puppy_photo_picture_11_168839.jpg' />
<div class='zoom-container'>
    <img src='http://images.all-free-download.com/images/graphiclarge/cute_puppy_photo_picture_11_168839.jpg'  class='zoom-center' />
<div>  

CSS:

div.zoom-container {
    position:absolute; 
    top:20px;
    left:20px;
    width:150px;
    height:150px;
    overflow:hidden;
}

img.zoom-center {
    -webkit-transform: matrix(2,0,0,2,-200,-200 ); //(:edit) 
    transform: matrix(2,0,0,2,-200,-200 );
}

如果我理解你的问题，请告诉我，随时寻求有关 jquery 部分的帮助