jquery旋转重置大小和位置?

发布于 2024-10-01 01:02:41 字数 238 浏览 2 评论 0原文

我正在使用 jquery 旋转插件

当我在具有特定宽度和高度的 img 元素上调用它时(这不是源图像的实际宽度和高度。)但是,旋转应用准确它重置宽度和高度以匹配源图像。此外,如果图像已定位,它会删除其定位并将其设置为内联。

有办法防止这种情况吗?

I am using the jquery rotate plugin.

When I call it on an img element that has a specific width and height (that is not the actual width and height of the source image.) The rotation is applied accurately however it resets the width and height to match the source image. Also if the image is positioned, it removes its positioning and sets it inline.

Is there a way to prevent this?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

少钕鈤記 2024-10-08 01:02:41

这不起作用的原因是该插件从源图像创建一个新图像,但未能考虑其当前的宽度和高度。请注意,它实际上已经在 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;
    }

The reason this doesn't work is that the plugin creates a new image from the source image but fails to take its current width and height into account. Note that it actually already works correctly in Internet Explorer, because it rotates the original image with some Microsoft-only matrix transform mechanism. If you look at line 27 and following, where the "good browser logic" is applied:

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

Now if you include the width and height here it works in Firefox as well:

    } 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;
    }
聽兲甴掵 2024-10-08 01:02:41

jQuery 旋转插件使用图像的大小而不是 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) { ... }

The jQuery rotate plugin uses the size of the image instead of the size of the HTML object.

You need to get the size of your object first, and then set the width and height that you wish to use with something like this at the beginning of the plugin :

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

Once you have your variables set, use them whenever the image is redrawn in the plugin.
A new img element is created and your image will be drawn on it. Instead of using the size of the image, use the size from the variables (see my comment in the code)

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);
}

As for the positioning, do you position it with an inline style? If so, you will obviously lose it when the HTML element is created from scratch. You shouldn't lose it with a css class though (add your class in the jQuery plugin if needed).

You should probably make the size an option of this pluging instead of using a hardcoded selector. It will be much simpler to reuse :

jQuery.fn.rotate = function(angle,whence, imageWidth, imageHeight) { ... }
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文