How to use the raphael.fn function in raphael
To help you get started, we’ve selected a few raphael examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
crccheck / raphael-svg-import-classic / raphael-svg-import.js View on Github 
attr.x1,
attr.y1,
"L",
attr.x2,
attr.y2,
"Z"];
delete attr.x1;
delete attr.y1;
delete attr.x2;
delete attr.y2;
return this.path(pathString);
};
// extending raphael with a polygon function
Raphael.fn.polygon = function(attr) {
var pointString = attr.points;
var poly = ['M'],
point = pointString.split(' ');
for(var i=0; i < point.length; i++) {
var c = point[i].split(',');
for(var j=0; j < c.length; j++) {
var d = parseFloat(c[j]);
if (!isNaN(d))
poly.push(d);
}
if (i === 0)
poly.push('L');
}
poly.push('Z');
delete attr.points;res = res[name]
}
// eslint-disable-next-line
typeof res == 'function' && isFunc && (res = res())
}
})
// eslint-disable-next-line
res = (res == null || res == obj ? all : res) + ''
return res
},
fill = function (str, obj) {
return String(str).replace(tokenRegex, function (all, key) {
return replacer(all, key, obj)
})
}
Raphael.fn.popup = function (X, Y, set, pos, ret) {
pos = String(pos || 'top-middle').split('-')
pos[1] = pos[1] || 'middle'
// eslint-disable-next-line
let r = 5,
bb = set.getBBox(),
w = Math.round(bb.width),
h = Math.round(bb.height),
x = Math.round(bb.x) - r,
y = Math.round(bb.y) - r,
gap = Math.min(h / 2, w / 2, 10),
shapes = {
top: 'M{x},{y}h{w4},{w4},{w4},{w4}a{r},{r},0,0,1,{r},{r}v{h4},{h4},{h4},{h4}a{r},{r},0,0,1,-{r},{r}l-{right},0-{gap},{gap}-{gap}-{gap}-{left},0a{r},{r},0,0,1-{r}-{r}v-{h4}-{h4}-{h4}-{h4}a{r},{r},0,0,1,{r}-{r}z',
bottom: 'M{x},{y}l{left},0,{gap}-{gap},{gap},{gap},{right},0a{r},{r},0,0,1,{r},{r}v{h4},{h4},{h4},{h4}a{r},{r},0,0,1,-{r},{r}h-{w4}-{w4}-{w4}-{w4}a{r},{r},0,0,1-{r}-{r}v-{h4}-{h4}-{h4}-{h4}a{r},{r},0,0,1,{r}-{r}z',
right: 'M{x},{y}h{w4},{w4},{w4},{w4}a{r},{r},0,0,1,{r},{r}v{h4},{h4},{h4},{h4}a{r},{r},0,0,1,-{r},{r}h-{w4}-{w4}-{w4}-{w4}a{r},{r},0,0,1-{r}-{r}l0-{bottom}-{gap}-{gap},{gap}-{gap},0-{top}a{r},{r},0,0,1,{r}-{r}z',
left: 'M{x},{y}h{w4},{w4},{w4},{w4}a{r},{r},0,0,1,{r},{r}l0,{top},{gap},{gap}-{gap},{gap},0,{bottom}a{r},{r},0,0,1,-{r},{r}h-{w4}-{w4}-{w4}-{w4}a{r},{r},0,0,1-{r}-{r}v-{h4}-{h4}-{h4}-{h4}a{r},{r},0,0,1,{r}-{r}z'res = res[name]
}
// eslint-disable-next-line
typeof res == 'function' && isFunc && (res = res())
}
})
// eslint-disable-next-line
res = (res == null || res == obj ? all : res) + ''
return res
},
fill = function (str, obj) {
return String(str).replace(tokenRegex, function (all, key) {
return replacer(all, key, obj)
})
}
Raphael.fn.popup = function (X, Y, set, pos, ret) {
pos = String(pos || 'top-middle').split('-')
pos[1] = pos[1] || 'middle'
// eslint-disable-next-line
let r = 5,
bb = set.getBBox(),
w = Math.round(bb.width),
h = Math.round(bb.height),
x = Math.round(bb.x) - r,
y = Math.round(bb.y) - r,
gap = Math.min(h / 2, w / 2, 10),
shapes = {
top: 'M{x},{y}h{w4},{w4},{w4},{w4}a{r},{r},0,0,1,{r},{r}v{h4},{h4},{h4},{h4}a{r},{r},0,0,1,-{r},{r}l-{right},0-{gap},{gap}-{gap}-{gap}-{left},0a{r},{r},0,0,1-{r}-{r}v-{h4}-{h4}-{h4}-{h4}a{r},{r},0,0,1,{r}-{r}z',
bottom: 'M{x},{y}l{left},0,{gap}-{gap},{gap},{gap},{right},0a{r},{r},0,0,1,{r},{r}v{h4},{h4},{h4},{h4}a{r},{r},0,0,1,-{r},{r}h-{w4}-{w4}-{w4}-{w4}a{r},{r},0,0,1-{r}-{r}v-{h4}-{h4}-{h4}-{h4}a{r},{r},0,0,1,{r}-{r}z',
right: 'M{x},{y}h{w4},{w4},{w4},{w4}a{r},{r},0,0,1,{r},{r}v{h4},{h4},{h4},{h4}a{r},{r},0,0,1,-{r},{r}h-{w4}-{w4}-{w4}-{w4}a{r},{r},0,0,1-{r}-{r}l0-{bottom}-{gap}-{gap},{gap}-{gap},0-{top}a{r},{r},0,0,1,{r}-{r}z',
left: 'M{x},{y}h{w4},{w4},{w4},{w4}a{r},{r},0,0,1,{r},{r}l0,{top},{gap},{gap}-{gap},{gap},0,{bottom}a{r},{r},0,0,1,-{r},{r}h-{w4}-{w4}-{w4}-{w4}a{r},{r},0,0,1-{r}-{r}v-{h4}-{h4}-{h4}-{h4}a{r},{r},0,0,1,{r}-{r}z'// http://commons.wikimedia.org/wiki/File:Blank_US_Map.svg
// http://commons.wikimedia.org/wiki/File:Usa_edcp_relief_location_map.png
// http://www.ravelrumba.com/code/demos/us-map-raphael/demo-animated.html
// http://mathworld.wolfram.com/AlbersEqual-AreaConicProjection.html
// from https://github.com/the55/usmap
var Raphael = require('raphael');
Raphael.fn.USMap = function(){
var paper = this;
var map = {
width: 950, // this is the svg width
drawnStates: new Array(50),
stateStyle: {
//"fill": "#d3d3d3",
"fill": "#74bbfa",
"fill-opacity": "1",
"stroke": "#eee",
"stroke-opacity": "1",
"stroke-linejoin": "round",
"stroke-miterlimit": "4",
//"stroke-width": "0.75",
"stroke-width": "2.25",
"stroke-dasharray": "none"});
});
var groupsExist = false, x;
for (x in groupSet){
groupsExist = true;
break;
}
if (groupsExist) {
myNewSet.groups = groupSet;
}
return myNewSet;
};
Raphael.fn.line = function(attr){
var pathString = ["M",
attr.x1,
attr.y1,
"L",
attr.x2,
attr.y2,
"Z"];
delete attr.x1;
delete attr.y1;
delete attr.x2;
delete attr.y2;
return this.path(pathString);
};
// extending raphael with a polygon function/*
* Raphael SVG Import Classic Copyright (c) 2015 Chris Chang, Ingvar Stepanyan
* Original Raphael SVG Import Copyright (c) 2009 Wout Fierens
* Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
*
*/
if (!Raphael && require){
var Raphael = require('raphael');
}
Raphael.fn.importSVG = function (svgXML, options) {
"use strict";
var myNewSet = this.set();
var groupSet = {};
var defaultTextAttr = {
// stroke: "none"
"text-anchor": "start" // raphael defaults to "middle"
};
// minimal polyfill for String.trim()
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trim#Polyfill
var trim = function(string){
return string.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
};
// polyfill for Array.forEach
var forEach = Function.prototype.bind && Array.prototype.forEach ? Function.prototype.call.bind(Array.prototype.forEach) : function (arr, callback) {
for (var i = 0, length = arr.length; i < length; i++) {
callback(arr[i], i, arr);var c = point[i].split(',');
for(var j=0; j < c.length; j++) {
var d = parseFloat(c[j]);
if (!isNaN(d))
poly.push(d);
}
if (i === 0)
poly.push('L');
}
poly.push('Z');
delete attr.points;
return this.path(poly);
};
Raphael.fn.polyline = function(attr) {
var pointString = attr.points;
var poly = ['M'],
point = pointString.split(' ');
for(var i=0; i < point.length; i++) {
var c = point[i].split(',');
for(var j=0; j < c.length; j++) {
var d = parseFloat(c[j]);
if (!isNaN(d))
poly.push(d);
}
if (i === 0)
poly.push('L');
}
delete attr.points;
return this.path(poly);if (res) {
if (name in res) {
res = res[name];
}
typeof res == "function" && isFunc && (res = res());
}
});
res = (res == null || res == obj ? all : res) + "";
return res;
},
fill = function(str, obj) {
return String(str).replace(tokenRegex, function(all, key) {
return replacer(all, key, obj);
});
};
Raphael.fn.popup = function(X, Y, set, pos, ret) {
pos = String(pos || "top-middle").split("-");
pos[1] = pos[1] || "middle";
let r = 5,
bb = set.getBBox(),
w = Math.round(bb.width),
h = Math.round(bb.height),
x = Math.round(bb.x) - r,
y = Math.round(bb.y) - r,
gap = Math.min(h / 2, w / 2, 10),
shapes = {
top: "M{x},{y}h{w4},{w4},{w4},{w4}a{r},{r},0,0,1,{r},{r}v{h4},{h4},{h4},{h4}a{r},{r},0,0,1,-{r},{r}l-{right},0-{gap},{gap}-{gap}-{gap}-{left},0a{r},{r},0,0,1-{r}-{r}v-{h4}-{h4}-{h4}-{h4}a{r},{r},0,0,1,{r}-{r}z",
bottom: "M{x},{y}l{left},0,{gap}-{gap},{gap},{gap},{right},0a{r},{r},0,0,1,{r},{r}v{h4},{h4},{h4},{h4}a{r},{r},0,0,1,-{r},{r}h-{w4}-{w4}-{w4}-{w4}a{r},{r},0,0,1-{r}-{r}v-{h4}-{h4}-{h4}-{h4}a{r},{r},0,0,1,{r}-{r}z",
right: "M{x},{y}h{w4},{w4},{w4},{w4}a{r},{r},0,0,1,{r},{r}v{h4},{h4},{h4},{h4}a{r},{r},0,0,1,-{r},{r}h-{w4}-{w4}-{w4}-{w4}a{r},{r},0,0,1-{r}-{r}l0-{bottom}-{gap}-{gap},{gap}-{gap},0-{top}a{r},{r},0,0,1,{r}-{r}z",
left: "M{x},{y}h{w4},{w4},{w4},{w4}a{r},{r},0,0,1,{r},{r}l0,{top},{gap},{gap}-{gap},{gap},0,{bottom}a{r},{r},0,0,1,-{r},{r}h-{w4}-{w4}-{w4}-{w4}a{r},{r},0,0,1-{r}-{r}v-{h4}-{h4}-{h4}-{h4}a{r},{r},0,0,1,{r}-{r}z"
},
offset = {import * as angular from 'angular';
import Module from 'app.module';
import notify from 'notify';
import * as $ from 'jquery';
var Raphael = require('raphael');
const CONTROLLER_NAME = 'PulseController';
const STATE_NAME = 'pulse';
Raphael.fn.drawGrid = function (x: number, y: number, w: number, h: number, wv: number, hv: number, color: string) {
color = color || "#000";
var path = ["M", Math.round(x) + 0.5, Math.round(y) + 0.5, "L", Math.round(x + w) + 0.5, Math.round(y) + 0.5, Math.round(x + w) + 0.5, Math.round(y + h) + 0.5, Math.round(x) + 0.5, Math.round(y + h) + 0.5, Math.round(x) + 0.5, Math.round(y) + 0.5],
rowHeight = h / hv,
columnWidth = w / wv;
for (var i = 1; i < hv; i++) {
path = path.concat(["M", Math.round(x) + 0.5, Math.round(y + i * rowHeight) + 0.5, "H", Math.round(x + w) + 0.5]);
}
for (i = 1; i < wv; i++) {
path = path.concat(["M", Math.round(x + i * columnWidth) + 0.5, Math.round(y) + 0.5, "V", Math.round(y + h) + 0.5]);
}
return this.path(path.join(",")).attr({stroke: color});
};
export class PulseController {
static $inject = ['$scope', '$http', '$state'];
public map: any = {};
Popular raphael functions
- raphael
- raphael._availableAttrs
- raphael.animation
- raphael.color
- raphael.core
- raphael.easing_formulas
- raphael.el
- raphael.fn
- raphael.fullfill
- raphael.getColor
- raphael.getTotalLength
- raphael.isBBoxIntersect
- raphael.pathIntersection
- raphael.rgb2hsl
- raphael.setWindow
- raphael.st
- raphael.svg
- raphael.vml
- raphael/raphael.prototype
