在我正在处理的应用程序中，我实现了将图像拖动到结构Canvas上的拖放区的操作，其中拖放区用表示Rect。放下时，Image会添加一个新的图像，我想用放到其上的矩形裁剪图像。我的实现基于这个小提琴：
http://jsfiddle.net/PromInc/ZxYCP/
由于页面大小可能很大，因此我正在使用该Canvas setZoom方法来管理放大和缩小。但是，当画布的缩放比例不是1时，上面的小提琴中的剪切技术将不起作用-上面的示例将画布缩放为0.5：
http://jsfiddle.net/pagameba/jjLe9wps/
我尝试了多种基于缩放来调整剪辑矩形的方法，但我只是想不出正确的组合。
我已经使用固定版本更新了http://jsfiddle.net/pagameba/jjLe9wps/上的小提琴。解决方法是根据画布的viewportTransform缩放和转换上下文。
ctx.scale(1 / x[0], 1 / x[3]);
ctx.translate(x[4], x[5]);
并缩放剪辑矩形的位置和大小
ctx.rect(
x[0] * clipRect.left - this.oCoords.tl.x,
x[3] * clipRect.top - this.oCoords.tl.y,
x[0] * clipRect.width,
x[3] * clipRect.height);
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句