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

Question

Как можно поворачивать только часть изображения, используя javascript/jquery на холсте. Я попытался повернуть изображение с перекосом и повернуть, но я не мог найти ответа, где мы можем вращать только часть изображения. Все функции, которые я использовал, будут полностью вращать изображение. Но вращение части изображения, сохраняющее остальную его, как есть, еще не было видно.

Если я хочу повернуть только половину изображения или что-то в этом роде, как я могу его достичь?

Кроме того, функция должна работать, когда изображение поворачивается, перемещается и динамически изменяется.

Answer 1

Если бы мне пришлось это сделать, я буду использовать одно и то же изображение дважды: одно изображение заполнено и копия с обрезкой (свойство css clip), которую я буду вращать.

См https://css-tricks.com/clipping-masking-css/

(Sorry, чтобы не использовать комментарии, я не уровень еще ...)

Answer 2

Это возможно, но это не кажется практичным для вашего проекта.

Вы можете с помощью метода перспективы нарезки:

http://www.subshell.com/en/subshell/blog/image-manipulation-html5-canvas102.html

В идеале вам необходимо определить формулу отображения в исходных декартовых координатах от искаженной системы координат, а затем перебрать назначения пиксельного пространства, используя выше, чтобы определить требуемый цвет для этого пикселя.

Вам также потребуется интерполировать соседние пиксели, чтобы избежать выхода, выглядящего «блочным».

Это нетривиальная ...

Answer 3

Обрежьте изображение с drawImage() и сделать еще один экземпляр этого образа, который можно вращать.

//from http://www.html5canvastutorials.com/tutorials/html5-canvas-image-crop/ 
var canvas = document.getElementById('canvas'); 
     var context = canvas.getContext('2d'); 
     var imageObj = new Image(); 

     imageObj.onload = function() { 
     // draw cropped image 
     var sourceX = 150; 
     var sourceY = 0; 
     var sourceWidth = 75; 
     var sourceHeight = 150; 
     var destWidth = sourceWidth; 
     var destHeight = sourceHeight; 
     var destX = 0; 
     var destY = 0; 

     context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight); 
     drawRotated(12, imageObj, 225, sourceY, sourceWidth, sourceHeight, 75, destY, destWidth, destHeight); 
     }; 
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; 

//from http://stackoverflow.com/a/17412387/1797161 
function drawRotated(degrees, image, sx,sy,sw,sh,dx,dy,dw,dh){ 
    //context.clearRect(0,0,canvas.width,canvas.height); 

    // save the unrotated context of the canvas so we can restore it later 
    // the alternative is to untranslate & unrotate after drawing 
    context.save(); 

    // move to the center of the canvas 
    context.translate(canvas.width/2,canvas.height/2); 

    // rotate the canvas to the specified degrees 
    context.rotate(degrees*Math.PI/180); 

    context.translate(-canvas.width/2,-canvas.height/2); 
    // draw the image 
    // since the context is rotated, the image will be rotated also 
    context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh); 

    // we’re done with the rotating so restore the unrotated context 
    context.restore(); 
} 

Вот скрипка: http://jsfiddle.net/fjhhjh4s/

Answer 4

Вы можете попробовать библиотеку OriDomi, если вы ищете культуры и анимации вашего изображения заслушивать является скрипкой.

[Curl изображение с OriDomi] [1]

[1]: https://jsfiddle.net/vipin7/jwqecvt3/17/