Question

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

如果没有旋转，我可以使用getBBox（）方法查找角点但旋转时它不起作用。

如何在拉斐尔找到旋转图像的角落？

Answer 1

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

图像的所有四个角落：

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/

<小时/> 旧答案，仅用于查找边界框的坐标：

你应该使用getBBox（）并将isWithoutTransform设置为false（这是默认值），它将起作用。

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中查找旋转图像的坐标

1 个答案: