Question

I’m using Raphaeljs to create a web application for creating diagrams. One of the shapes is a diamond, which is just a rectangle rotated 45 degrees. I need to test whether a circle falls within the rotated image, and I’m not sure how to go about it.

Answer 1

If you have a diamond:

var diamond = paper.rect(rect_x, rect_y, size, size);
diamond.rotate(45);

Then the two corners on the horizontal with have coordinates (nx1, ny) and (nx2, ny), where

ny  = rect_y + rect_w/2;
nx1 = rect_x + rect_w*(1-Math.sqrt(2))/2;
nx2 = rect_x + rect_w*(1+Math.sqrt(2))/2;

Then you create a diamond inside this one which is smaller by the radius of the circle.

var circle = paper.circle(cx, cy, r);
nx1 += r*Math.sqrt(2);
nx2 -= r*Math.sqrt(2);

Then you test whether centre of the circle is between the four sides of this diamond:

if (cy < ny - nx1 + cx &&
    cy > ny - nx2 + cx &&
    cy > ny + nx1 - cx &&
    cy < ny + nx2 - cx)
  {Circle is inside the diamond}