Raphaël Reference: Additional Methods

Glow

• Elements: all
• Notes: Glow is not an attribute, it should be thought of as a separate element. To remove a glow, name it and remove as usual.
• Optional Parameters: width of glow, fill (boolean, default is false), opacity, x offset, y offset, color
• Usage: element.glow( { 'width': number, 'fill': boolean, 'opacity': number, 'offsetx': number, 'offsety': number, 'color': string } )
• Example: The glow is given its own variable name, so it can be removed later if needed.

  var sky = paper.rect( 0,0,200,200 ).attr({ 'stroke-width': 0, 'fill': '#3e7dbb'})
  var sun = paper.circle( 100,100,50 ).attr({ 'stroke-width': 0, 'fill': 'white'})
  var sunglow = sun.glow({ 'width': 90, 'fill': true, 'opacity': 0.8, 'color': 'pink'})
  

Random Colors

• Notes: Used to get the next color in the spectrum with a specified brightness
• Optional Parameter: brightness, a value from 0 to 1
• Usage: Raphael.getColor( brightness )

Reordering Elements

• Notes: Move elements to the front or back of the canvas
• Usage: element.toFront(), element.toBack()

Hiding and Showing Elements

• Notes: Make elements visible or invisible. Does NOT remove element.
• Usage: element.hide(), element.show()

Removing an Element

• Notes: Used to remove a single element on a canvas
• Usage: element.remove()

Changing the Size of a Canvas

• Notes: Used to change the canvas size after creation
• Usage: paper.setSize( width, height )

Clearing a Canvas

• Notes: Used to remove ALL elements on a canvas
• Usage: paper.clear()

• Notes: A method that executes a function for every element on the canvas
• Usage: paper.forEach( function(e) { routine on elements e } )
• Example: Squares defined in a loop are given a blue stroke. Note that this would effect ALL elements on the canvas.

  for ( i = 0; i < 5; i++ ) {
  	var s = paper.rect( 20+(i*100), 20, 60, 60 )
  	}
  	
  paper.forEach( function (e) { e.attr({ stroke: "blue" }); });
  

Finding Intersection of Paths

• Elements: paths
• Notes: Returns the coordinates where two paths intersect
• Usage: Raphael.pathIntersection( first path, second path )
• Example: Find the point 200 pixels from the start of a path (measuring along the path)

  // Assuming paths called P1 and P2 have been defined
  var point = Raphael.pathIntersection( P1,P2 )
  console.log( point.x, point.y )
  

Finding a Point On a Path

• Elements: paths
• Notes: Finds a point on a path a specified distance from the beginning of the path
• Usage: element.getPointAtLength( length )
• Example: Find the point 200 pixels from the start of a path (measuring along the path)

  // Assuming path called P has been defined
  var point = P.getPointAtLength( 200 )
  console.log( point.x, point.y )
  

Detecting if an Element Contains a Point

• Elements: all
• Notes: Returns true or false, depending if the point is contained by the element
• Usage: element.isPointInside( x, y )

Finding Single Elements By Location

• Elements: all
• Notes: Find the topmost element that contains a point
• Usage: paper.getElementByPoint( x, y )
• Example: Find the element at the point (50, 80)

  paper.getElementByPoint( 50, 80 )
  

Finding Sets of Elements By Location

• Elements: all
• Notes: Find a set of elements that contain a particular point
• Usage: paper.getElementsByPoint( x, y )
• Example: 100 randomly created circles are defined in a loop. The circles overlapping the center of the canvas are turned red.

  var paper = new Raphael(document.getElementById('point'), 200, 200);
  for( i = 0; i < 100; i++ ) {
  	var c = paper.circle( Math.random() * 200, Math.random() * 200, Math.random() * 30 )
  	}
  var centerPoint= paper.circle( 100, 100, 5)		// draw circle at center, to make sure we get at least one red one
  var centerCircles = paper.getElementsByPoint( 100, 100 )	// create set of circles that touch the center
  centerCircles.attr({ 'fill':'red', 'opacity':0.7 })		// turn them all red
  

  Redraw