Question

如何在画布上使用javascript / jquery仅旋转图像的一部分。我试图用倾斜旋转图像并旋转，但我找不到任何可以旋转图像的某些部分的答案。我使用的所有功能都将完全旋转图像。但是，尚未看到图像的部分旋转保持其余部分。

如果我只想旋转图像的一半或类似的东西，我该如何实现呢？

此外，该功能应在图像旋转，移动以及动态调整大小时起作用。

Answer 1

使用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 2

如果我必须这样做，我将使用相同的图像两次：一个图像已满，一个带剪辑的副本（css剪辑属性），我将旋转。

请参阅https://css-tricks.com/clipping-masking-css/

（抱歉不使用评论，我还没有等级......）

Answer 3

这是可能的，但对您的项目来说似乎并不实用。

您可以使用透视切片技术：

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

理想情况下，您需要定义一个公式映射到扭曲坐标系中的原始笛卡尔坐标，然后迭代目标像素空间，使用上面的映射来确定该像素所需的颜色。

您还需要插入相邻像素，以避免输出看起来“块状”。

这是非平凡的......

Answer 4

你可以试试OriDomi图书馆，如果你正在寻找裁剪和动画你的图像听觉是一个小提琴。

[使用OriDomi的卷曲图像] [1]

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

如何旋转图像的一部分

4 个答案: