Learning Raphaël Js - Boxes filled with diagonal lines

I’ve been working on a client project that involved some reasonable amount of SVG/VML work. In order to make my life more sane, I’ve been using Raphaël JS to do what it does best, which is provide a great API for making sexy vector graphics. And while I can’t share what I’ve been doing with it, I can share a little hacking I did tonight on making boxes with diagonal lines. Not the most interesting thing in the world, but sometimes the journey is more interesting than the destination. While not perfect, and issue free, I came up with a reasonably useful function for generating boxes that have a diagonal line pattern on them.

Show Plain Text
  1. Raphael.fn.stripedRect = function (x1, y1, width, height, options) {
  2.     options = options || {};
  3.     var boxEl = this.rect(x1, y1, width, height);
  4.     var xShift = options.lineSpacing || 10;
  5.     var angle = options.angle || 45;
  6.  
  7.     var radians = (90 - angle) * (Math.PI / 180);
  8.     var yShift = xShift / Math.tan(radians);
  9.  
  10.     var moveX = x1,
  11.         moveY = y1,
  12.         finalX = x1 + width,
  13.         finalY = y1 + height,
  14.         lineX = x1,
  15.         lineY = y1,
  16.         pathString = [];
  17.  
  18.     while (moveX < finalX) {
  19.         moveX += xShift;
  20.         lineY += yShift;
  21.         if (lineY > finalY) {
  22.             lineX += xShift;
  23.             lineY = finalY;
  24.         }
  25.         if (moveX > finalX) {
  26.             moveY += yShift;
  27.             moveX = finalX;
  28.         }
  29.         pathString = pathString.concat(['M', moveX, moveY, 'L', lineX, lineY]);
  30.     }
  31.     while (moveY < finalY) {
  32.         moveY += yShift;
  33.         lineX += xShift;
  34.         if (lineX > finalX) {
  35.             lineY += yShift;
  36.             lineX = finalX;
  37.         }
  38.         if (lineX > x1 && lineY < finalY) {
  39.             lineY += yShift;
  40.             lineX = x1;
  41.         }
  42.         if (lineY > finalY) {
  43.             lineY = finalY;
  44.         }
  45.         pathString = pathString.concat(['M', moveX, moveY, 'L', lineX, lineY]);
  46.         if (moveY + yShift > finalY) {
  47.             break;
  48.         }
  49.     }
  50.     var stripe = this.path(pathString);
  51.  
  52.     var collection = this.set();
  53.     collection.push(boxEl, stripe);
  54.     return collection;
  55. };

I’ve also made a simple demo page, that you can play with to see the code in action. This is obviously the tip of the iceberg as far as vector graphics on the web go, so go experiment and play.

Comments

This is my first time on your site, but this is a very cool article. I have bookmarked this in case I can find a time to use it. Thank you!

Shawn Bird on 11/24/09

now how to do that in canvas ?

milton on 2/27/14

I am a beginner of Javascript and Raphael. Thank you very much for your code!
I little bit modified it from line 19 to 50.

while (moveX < finalX-xShift) { moveX += xShift; lineY += yShift; if (lineY > finalY) { if (lineX == x1 && xShift > (lineY-finalY)/lineY * moveX) { lineX += (lineY-finalY)/lineY * moveX; } else{lineX += xShift;} lineY = finalY; } pathString = pathString.concat([‘M’, moveX, moveY, ‘L’, lineX, lineY]); } moveX = lineX; moveY = lineY; lineX = finalX; while (moveX < finalX-xShift) { moveX += xShift; lineY = finalY – (finalX – moveX)/ Math.tan(radians); pathString = pathString.concat([‘M’, moveX, moveY, ‘L’, lineX, lineY]); }

Hiroaki on 8/7/14

Comments are not open at this time.