如何使用CSS3 / HTML5或Javascript创建基于div位置显示图像缩放部分的缩放“窗口”？

Question

我正在研究一种非矩形裁剪工具，我希望每个裁剪点都有一个缩放视图。 在下面的示例图像中，裁剪点是由红线连接的正方形的角。

早期多边形作物

这些正方形是由JSPlumb创建的可拖动div。 这些div看起来像这样：

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

我想在图像周围放置四个缩放窗口，在那里我可以看到每个角落的放大视图，但我只能找到有关围绕鼠标进行缩放的资源。 理想情况下，这些视图将是以jsPlumb端点的当前位置为中心的相同大小的方块。

我发现了CSS Zoom属性，但它似乎非常失败。 我知道答案可能在css3的transform.scale属性中，但我不知道如何继续。 虽然我更喜欢css / html解决方案，但我绝不反对使用一些JS来完成工作。 任何提示或见解表示赞赏！

Answer 1

我不认为只有 css 才有可能，即。 我想，你需要一些Jquery（或javascript），我希望我理解你的问题：

我只想在页面上放置一个带有'zoom-container'类的div，它保存缩放和移位的图像。

我认为变换中的matrix（）：你需要改变每个JavaScript的值。

这是一个简单的小提琴和代码：

<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部分寻求帮助