Question

当我在具有特定宽度和高度的img元素上调用它时（不是源图像的实际宽度和高度。）然而，旋转是准确应用的它重置宽度和高度以匹配源图像。此外，如果图像已定位，则会移除其定位并将其设置为内嵌。

有没有办法阻止这种情况？

Answer 1

这不起作用的原因是插件从源图像创建了一个新图像，但未能将其当前的宽度和高度考虑在内。请注意，它实际上已在Internet Explorer中正常工作，因为它使用一些仅限Microsoft的矩阵转换机制旋转原始图像。如果你看第27行及其后的地方，那里应用了“良好的浏览器逻辑”：

    } else {
    var canvas = document.createElement('canvas');
    if (!p.oImage) {
        canvas.oImage = new Image();
        canvas.oImage.src = p.src;
    } else {
        canvas.oImage = p.oImage;
    }

现在，如果你在这里包含宽度和高度，它也适用于Firefox：

    } else {
    var canvas = document.createElement('canvas');
    if (!p.oImage) {
        canvas.oImage = new Image();
        canvas.oImage.width = p.width; // ADDED
        canvas.oImage.height = p.height; // ADDED
        canvas.oImage.src = p.src;
    } else {
        canvas.oImage = p.oImage;
    }

Answer 2

jQuery rotate插件使用图像的大小而不是HTML对象的大小。

您需要先获取对象的大小，然后在插件的开头设置您希望使用的宽度和高度：

var imageHeight = $(yourImageContainer).height();
var imageWidth = $(yourImageContainer).width();

设置好变量后，只要在插件中重新绘制图像，就可以使用它们。将创建一个新的img元素，并在其上绘制您的图像。而不是使用图像的大小，使用变量的大小（参见我在代码中的注释）

jQuery.fn.rotate = function(angle,whence) {
    var imageHeight = $(yourImageContainer).height();
    var imageWidth = $(yourImageContainer).width();


    var p = this.get(0);

    if (!whence) {
        p.angle = ((p.angle==undefined?0:p.angle) + angle) % 360;
    } else {
        p.angle = angle;
    }

    if (p.angle >= 0) {
        var rotation = Math.PI * p.angle / 180;
    } else {
        var rotation = Math.PI * (360+p.angle) / 180;
    }
    var costheta = Math.cos(rotation);
    var sintheta = Math.sin(rotation);

    if (document.all && !window.opera) {
        var canvas = document.createElement('img');


            //The size of the object is set here. MODIFY IT HERE
        canvas.src = p.src;
        canvas.height = p.height;
        canvas.width = p.width;

        canvas.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11="+costheta+",M12="+(-sintheta)+",M21="+sintheta+",M22="+costheta+",SizingMethod='auto expand')";
    } else {
        var canvas = document.createElement('canvas');
        if (!p.oImage) {
            canvas.oImage = new Image();
            canvas.oImage.src = p.src;
        } else {
            canvas.oImage = p.oImage;
        }

        canvas.style.width = canvas.width = Math.abs(costheta*canvas.oImage.width) + Math.abs(sintheta*canvas.oImage.height);
        canvas.style.height = canvas.height = Math.abs(costheta*canvas.oImage.height) + Math.abs(sintheta*canvas.oImage.width);

        var context = canvas.getContext('2d');
        context.save();
        if (rotation <= Math.PI/2) {
            context.translate(sintheta*canvas.oImage.height,0);
        } else if (rotation <= Math.PI) {
            context.translate(canvas.width,-costheta*canvas.oImage.height);
        } else if (rotation <= 1.5*Math.PI) {
            context.translate(-costheta*canvas.oImage.width,canvas.height);
        } else {
            context.translate(0,-sintheta*canvas.oImage.width);
        }
        context.rotate(rotation);
        context.drawImage(canvas.oImage, 0, 0, canvas.oImage.width, canvas.oImage.height);
        context.restore();
    }
    canvas.id = p.id;
    canvas.angle = p.angle;
    p.parentNode.replaceChild(canvas, p);
}

jQuery.fn.rotateRight = function(angle) {
    this.rotate(angle==undefined?90:angle);
}

jQuery.fn.rotateLeft = function(angle) {
    this.rotate(angle==undefined?-90:-angle);
}

至于定位，你是否采用内联风格定位？如果是这样，当从头开始创建HTML元素时，您显然会丢失它。你不应该用css类丢失它（如果需要的话，在jQuery插件中添加你的类）。

您可能应该将此大小作为此插入的选项，而不是使用硬编码选择器。重用会简单得多：

jQuery.fn.rotate = function(angle,whence, imageWidth, imageHeight) { ... }

jquery旋转重置大小和位置？

2 个答案: