Как закрепить изображение при увеличении холста

Question

В приложении, над которым я работаю, я реализовал перетаскивание изображений на зоны сбрасывания на ткань Canva, где зона выпадения представлена ​​Rect. При удалении добавляется новый Image, и я хотел бы обрезать изображение по прямоугольнику, на которое он был сброшен. Я основана моя реализация на этой скрипке:

http://jsfiddle.net/PromInc/ZxYCP/

Потому что мой размер страницы может быть большим, я использую метод CanvassetZoom для управления увеличения и уменьшения масштаба. Когда масштаб холста является иным, чем 1, хотя, метод отсечения в приведенной выше скрипке не работает - пример выше с холстом увеличенного до 0,5:

http://jsfiddle.net/pagameba/jjLe9wps/

Я попытался несколько способы настройки прямоугольника клипа на основе масштабирования, но я просто не могу понять правильную комбинацию.

Answer 1

Я обновил скрипку по адресу 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);