title: Drawing arrows to circles
body: <p>I am working on creating graphs with vertices and edges. The graph is directed, so the edges are represented as arrows. My problem is getting the correct coordinates for the arrows. </p>
  
  <p>A <code>Vertex</code> has a <code>Coordinate</code> (see class below), while an <code>Edge</code> goes from a <code>Vertex</code> to another <code>Vertex</code>. The challenge is that a vertex is drawn with a fixed radius (see picture below). I'm having problems getting the arrow pointing to the correct place on the circles circumference. It seems like with the code I currently have, the arrow points to the top-left corner, not the closest point. </p>
  
  <p>I have the following method for drawing the arrows:</p>
  
  <pre><code>public static void drawArrow(Graphics g, Color color, int size, 
          Coordinate from, Coordinate to, Coordinate offset) {
      Graphics2D g2 = (Graphics2D) g.create();
  
      g2.setColor(color);
  
      double dx = to.x - from.x, dy = to.y - from.y;
      double angle = Math.atan2(dy, dx);
      int len = (int) Math.sqrt(dx*dx + dy*dy);
      AffineTransform at = AffineTransform.getTranslateInstance(from.x + offset.x, from.y + offset.y);
      at.concatenate(AffineTransform.getRotateInstance(angle));
      g2.transform(at);
  
      // Draw horizontal arrow starting in (0, 0)
      g2.drawLine(0, 0, len, 0);
      g2.fillPolygon(new int[] {len, len-size, len-size, len},
              new int[] {0, -size, size, 0}, 4);
  }
  </code></pre>
  
  <p>I got the essentials of the arrow code from an answer by <strong>aioobe</strong>, <a href="https://stackoverflow.com/questions/4112701/drawing-a-line-with-arrow-in-java">here</a>.</p>
  
  <p>I this method by overriding <code>Edge</code>'s <code>paintComponent</code> function:</p>
  
  <pre><code>@Override
  public void paintComponent(Graphics g) {
      double radius = this.from.getRadius();
  
      Coordinate vector = this.from.getPosition().clone();
      vector.normalize();
      vector.x = vector.x * radius; vector.y = vector.y * radius;
  
      Coordinate to = new Coordinate(this.to.getPosition().x - vector.x,
              this.to.getPosition().y - vector.y);
  
      GraphicsUtils.drawArrow(g, this.color, ARROW_SIZE,
              this.from.getPosition(), to, 
              new Coordinate(radius, radius));
  }
  </code></pre>
  
  <p>As the <code>drawArrow</code> method does what it's supposed to, it draws an arrow from a to b, I want to change the way that I am calling it in the above method. For example, by using the offset parameter for the <code>drawArrow</code> method or something alike.</p>
  
  <p>The <code>Coordinate</code> class:</p>
  
  <pre><code>public class Coordinate {
  
      public double x;
      public double y;
  ...
      public void normalize() {
          double length = Math.sqrt(Math.pow(this.x, 2) + Math.pow(this.y, 2));
          this.x = this.x / length;
          this.y = this.y / length;
      }
  ...
  }
  </code></pre>
  
  <p>A screenshot of my current output:</p>
  
  <p><img src="https://i.stack.imgur.com/jQBoD.png" alt="Directed graph"></p>
  
  <p>Note there are both arrows from D to E and E to D. The latter is not showing because the arrow head is behind D's circle.</p>
  
  <p>Now to be clear, the problem is:</p>
  
  <p>In the <code>paintComponent</code>-method, I am taking the radius of the circle and multiplying it with the normalized (see method) vector. This would give me a point of the circle's circumference, but it seems that always results in the top-left corner, which I don't get. I want to calculate the point on the circumference closest to the source vertex. </p>
  
  <p>Like so:</p>
  
  <p><img src="https://i.stack.imgur.com/fUtxA.png" alt="http://www.onemotion.com/flash/sketch-paint/"></p>
  
  <p>Any suggestions?</p>