https://jsfiddle.net/cxhexdyw/
зробив скейл у напрямку довільного вектора (перпендикуляр до заданої лінії в мому випадку)
моменти які варто виділити:
як заскейлити зображення під довільним кутом
API для роботи з канвасом по замовчуванню дає можливість скейлити зображення тільки відносно координатних осей. Тому нам потрібно перетворити координатну площину таким чином, щоб наш вектор став в рівень з однією з цих осей. Після перетворення ми можемо заскейлити його звичним спочобом по "х" чи "у" (в залежності від того до якої осі ми рівнялись). Після того як скейл змінено нам потрібно повернути координатну площину до початкового її стану, тому застосовуємо протилежні перетворення до тих, які ми робили в першому кроці:
var angle = Math.atan2(line.b.y - line.a.y, line.b.x - line.a.x);//знаходимо кут до осі У
ctx.rotate(angle); //крутимо координатну площину, щоб вектор скейлу став в рівень з віссю У
ctx.scale(1, scale); //скейлимо площину
ctx.rotate(-angle); //повертаємо її на місце
ctx.drawImage(...
як зафіксувати нерухому точку при перетворенні
це потрібно для того, щоб розмістити в правильному місці заскейлене зображення
Згрубша алгоритм такий:
зсуваємо координатну площину до потрібної точки (в даному прикладі це центр лінії яка є перпендикуляром до напрямного вектора)
потім застосовуємо потрібні нам перетворення (rotate, scale)
і при малюванні зображення початкові його координати задаємо як координати тої самої точки тільки зі знаком "-"
var midX = (line.a.x+line.b.x)/2;
var midY = (line.a.y+line.b.y)/2;
ctx.translate(midX, midY);
ctx.drawImage(canvasSource, 0, 0, canvasSource.width, canvasSource.height,
-midX, -midY, canvas.width, canvas.height);
По суті якщо зображення ніяк не вертіти, то зображення намалюєтсья без змін, а якщо змінити rotate, то буде видно що зображення поркутилось не довкола лівого верхнього кута, а довкола заданої точки
сильно допомогла стаття http://codetheory.in/canvas-rotating-an … lar-point/
