在 Raphael 中查找旋转图像的坐标 [英] Finding the coordinates of a rotated image in Raphael

问题描述

我有一个带有矩形图像的页面.用户可以将图像旋转到任意角度并将其移动到纸上的任意位置.

I have a page with a rectangular image. The user can rotate the image to any angle and move it to any position on the paper.

如果没有旋转，我只能使用 getBBox() 方法来找到角，但是旋转它不起作用.

Without the rotation I can just use the getBBox() method to find the corners but with rotation it doesn't work.

如何在 Raphael 中找到旋转图像的角点?

How can I find the corners of a rotated image in Raphael?

推荐答案

您可以在 Matrix 对象上使用 x 和 y 函数来查找图像角坐标后转型.http://raphaeljs.com/reference.html#Matrix.x

You can use the x and y functions on the Matrix object to find the image corner coordinates after transformation. http://raphaeljs.com/reference.html#Matrix.x

图像的所有 4 个角:

All 4 corners of image:

var paper = Raphael(0, 0, 500, 500);
var el=  paper.image("http://www.abcgallery.com/R/raphael/raphael57a.jpg", 100, 100, 210, 258);
el.transform('t20r45');
var x = el.matrix.x(el.attr("x"), el.attr("y"));
var y = el.matrix.y(el.attr("x"), el.attr("y"));

var x2 = el.matrix.x(el.attr("x") + el.attr("width"), el.attr("y"));
var y2 = el.matrix.y(el.attr("x") + el.attr("width"), el.attr("y"));

var x3 = el.matrix.x(el.attr("x"), el.attr("y") + el.attr("height"));
var y3 = el.matrix.y(el.attr("x"), el.attr("y") + el.attr("height"));

var x4 = el.matrix.x(el.attr("x") + el.attr("width"), el.attr("y") + el.attr("height"));
var y4 = el.matrix.y(el.attr("x") + el.attr("width"), el.attr("y") + el.attr("height"));

paper.circle(x, y,5);
paper.circle(x2, y2, 5);
paper.circle(x3, y3, 5);
paper.circle(x4, y4, 5);

http://jsfiddle.net/eWdE8/5/<小时>旧答案，仅用于查找边界框的坐标:

http://jsfiddle.net/eWdE8/5/

---

Old answer, only for finding the coordinates of the bounding box:

您应该使用 getBBox() 并将 isWithoutTransform 设置为 false(这是默认值)，它会起作用.

You should use getBBox() with isWithoutTransform set to false (which is the default), and it will work.

var paper = Raphael(0, 0, 500, 500);
var el  =  paper.image("http://www.abcgallery.com/R/raphael/raphael57a.jpg", 100, 100, 210, 258);
el.transform('r45')
console.log(el.getBBox(false)) // After transform
console.log(el.getBBox(true))  // Before transform

http://jsfiddle.net/eWdE8/

这篇关于在 Raphael 中查找旋转图像的坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！