Browse Source

renamed all node and edge files, added diamond shape, tweaked shapes to always align and center all shapes. this improves the labelling

flowchartTest
Alex de Mulder 9 years ago
parent
commit
5c54f27f12
30 changed files with 570 additions and 383 deletions
  1. +326
    -217
      dist/vis.js
  2. +16
    -16
      examples/network/04_shapes.html
  3. +2
    -2
      lib/network/modules/EdgesHandler.js
  4. +1
    -1
      lib/network/modules/NodesHandler.js
  5. +32
    -23
      lib/network/modules/components/Edge.js
  6. +37
    -33
      lib/network/modules/components/Node.js
  7. +2
    -2
      lib/network/modules/components/edges/bezierEdgeDynamic.js
  8. +2
    -2
      lib/network/modules/components/edges/bezierEdgeStatic.js
  9. +2
    -2
      lib/network/modules/components/edges/straightEdge.js
  10. +3
    -3
      lib/network/modules/components/edges/util/BezierEdgeBase.js
  11. +2
    -2
      lib/network/modules/components/edges/util/EdgeBase.js
  12. +26
    -0
      lib/network/modules/components/nodes/shapes/Diamond.js
  13. +2
    -2
      lib/network/modules/components/nodes/shapes/Triangle.js
  14. +3
    -3
      lib/network/modules/components/nodes/shapes/box.js
  15. +2
    -2
      lib/network/modules/components/nodes/shapes/circle.js
  16. +2
    -2
      lib/network/modules/components/nodes/shapes/circularImage.js
  17. +2
    -2
      lib/network/modules/components/nodes/shapes/database.js
  18. +2
    -2
      lib/network/modules/components/nodes/shapes/dot.js
  19. +2
    -2
      lib/network/modules/components/nodes/shapes/ellipse.js
  20. +3
    -1
      lib/network/modules/components/nodes/shapes/empty.js
  21. +2
    -2
      lib/network/modules/components/nodes/shapes/icon.js
  22. +2
    -3
      lib/network/modules/components/nodes/shapes/image.js
  23. +2
    -2
      lib/network/modules/components/nodes/shapes/square.js
  24. +2
    -2
      lib/network/modules/components/nodes/shapes/star.js
  25. +2
    -2
      lib/network/modules/components/nodes/shapes/text.js
  26. +2
    -2
      lib/network/modules/components/nodes/shapes/triangleDown.js
  27. +3
    -3
      lib/network/modules/components/nodes/util/CircleImageBase.js
  28. +2
    -2
      lib/network/modules/components/nodes/util/NodeBase.js
  29. +6
    -5
      lib/network/modules/components/nodes/util/ShapeBase.js
  30. +78
    -41
      lib/network/shapes.js

+ 326
- 217
dist/vis.js
File diff suppressed because it is too large
View File


+ 16
- 16
examples/network/04_shapes.html View File

@ -24,34 +24,34 @@
function draw() {
nodes = [
{id: 1, label: 'circle', shape: 'circle', group: 'group_x'},
{id: 1, label: 'circle', shape: 'circle', group: 'group_x'},
{id: 2, label: 'ellipse', shape: 'ellipse', group: 'group_x'},
{id: 3, label: 'database', shape: 'database', group: 'group_x'},
{id: 4, label: 'box', shape: 'box', group: 'group_x'}
{id: 3, label: 'database',shape: 'database',group: 'group_x'},
{id: 4, label: 'box', shape: 'box', group: 'group_x'},
{id: 5, label: 'diamond', shape: 'diamond', group: 'group_x'}
];
edges = [
{from: 3, to: 1, style: 'arrow'},
{from: 1, to: 4, style: 'dash-line'},
{from: 1, to: 2, style: 'arrow-center'}
{from: 3, to: 1, arrows: 'to'},
{from: 1, to: 4, dashes: true},
{from: 1, to: 2, dashes: true, arrows: 'to, from'},
{from: 1, to: 5, arrows: 'middle'}
];
var mainId = 5;
nodes.push({id: mainId, label: 'shapes\nand\nsizes', shape: 'box', group: 'group_main'});
var shapes = ['dot', 'square', 'triangle', 'triangleDown', 'star'];
var id = 6;
var mainId = 6;
nodes.push({id: mainId, label: 'shapes and\nsizes', shape: 'box', group: 'group_main'});
var shapes = ['dot', 'square', 'triangle', 'triangleDown', 'star','diamond'];
var id = 7;
for (var size = 1; size < 4; size++) {
var groupId = id;
nodes.push({id: id, label: 'size ' + size, shape: 'box', group: 'group' + size});
edges.push({from: mainId, to: groupId, color: 'gray', width: size});
id++;
for (var i in shapes) {
if (shapes.hasOwnProperty(i)) {
nodes.push({id: id, value: size, label: shapes[i], shape: shapes[i], group: 'group' + size});
edges.push({from: groupId, to: id, color: 'gray', width: size});
id++;
}
for (var i = 0; i < shapes.length; i++) {
nodes.push({id: id, value: size, label: shapes[i], shape: shapes[i], group: 'group' + size});
edges.push({from: groupId, to: id, color: 'gray', width: size});
id++;
}
}

+ 2
- 2
lib/network/modules/EdgesHandler.js View File

@ -6,7 +6,8 @@
var util = require("../../util");
var DataSet = require('../../DataSet');
var DataView = require('../../DataView');
var Edge = require("./components/Edge");
import Edge from "./components/Edge"
class EdgesHandler {
constructor(body, images, groups) {
@ -152,7 +153,6 @@ class EdgesHandler {
throw new Error("The arrow options can only be an object or a string. Refer to the documentation. You used:" + JSON.stringify(options.arrows));
}
}
}
}

+ 1
- 1
lib/network/modules/NodesHandler.js View File

@ -69,7 +69,7 @@ class NodesHandler {
physics: true,
scaling: {
min: 10,
max: 40,
max: 30,
label: {
enabled: true,
min: 14,

+ 32
- 23
lib/network/modules/components/Edge.js View File

@ -1,10 +1,10 @@
var util = require('../../../util');
import Label from './unified/label.js'
import BezierEdgeDynamic from './edges/bezierEdgeDynamic'
import BezierEdgeStatic from './edges/bezierEdgeStatic'
import StraightEdge from './edges/straightEdge'
import Label from './unified/Label.js'
import BezierEdgeDynamic from './edges/BezierEdgeDynamic'
import BezierEdgeStatic from './edges/BezierEdgeStatic'
import StraightEdge from './edges/StraightEdge'
/**
* @class Edge
*
@ -116,29 +116,38 @@ class Edge {
if (options.value !== undefined) {this.value = options.value;}
if (options.color !== undefined) {
if (util.isString(options.color)) {
this.options.color.color = options.color;
this.options.color.highlight = options.color;
}
else {
if (options.color.color !== undefined) {
this.options.color.color = options.color.color;
if (options.color !== undefined) {
if (util.isString(options.color)) {
util.assignAllKeys(this.options.color, options.color);
}
if (options.color.highlight !== undefined) {
this.options.color.highlight = options.color.highlight;
}
if (options.color.hover !== undefined) {
this.options.color.hover = options.color.hover;
else {
util.extend(this.options.color, options.color);
}
}
// inherit colors
if (options.color.inherit === undefined) {
this.options.color.inherit.enabled = false;
}
else {
util.mergeOptions(this.options.color, options.color, 'inherit');
}
//if (util.isString(options.color)) {
// this.options.color.color = options.color;
// this.options.color.highlight = options.color;
//}
//else {
// if (options.color.color !== undefined) {
// this.options.color.color = options.color.color;
// }
// if (options.color.highlight !== undefined) {
// this.options.color.highlight = options.color.highlight;
// }
// if (options.color.hover !== undefined) {
// this.options.color.hover = options.color.hover;
// }
//}
//
//// inherit colors
//if (options.color.inherit === undefined) {
// this.options.color.inherit.enabled = false;
//}
//else {
// util.mergeOptions(this.options.color, options.color, 'inherit');
//}
}
// A node is connected when it has a from and to node that both exist in the network.body.nodes.

+ 37
- 33
lib/network/modules/components/Node.js View File

@ -1,20 +1,21 @@
var util = require('../../../util');
import Label from './unified/label'
import Box from './nodes/shapes/box'
import Circle from './nodes/shapes/circle'
import CircularImage from './nodes/shapes/circularImage'
import Database from './nodes/shapes/database'
import Dot from './nodes/shapes/dot'
import Ellipse from './nodes/shapes/ellipse'
import Icon from './nodes/shapes/icon'
import Image from './nodes/shapes/image'
import Square from './nodes/shapes/square'
import Star from './nodes/shapes/star'
import Text from './nodes/shapes/text'
import Triangle from './nodes/shapes/triangle'
import TriangleDown from './nodes/shapes/triangleDown'
import Label from './unified/Label'
import Box from './nodes/shapes/Box'
import Circle from './nodes/shapes/Circle'
import CircularImage from './nodes/shapes/CircularImage'
import Database from './nodes/shapes/Database'
import Diamond from './nodes/shapes/Diamond'
import Dot from './nodes/shapes/Dot'
import Ellipse from './nodes/shapes/Ellipse'
import Icon from './nodes/shapes/Icon'
import Image from './nodes/shapes/Image'
import Square from './nodes/shapes/Square'
import Star from './nodes/shapes/Star'
import Text from './nodes/shapes/Text'
import Triangle from './nodes/shapes/Triangle'
import TriangleDown from './nodes/shapes/TriangleDown'
/**
* @class Node
@ -188,46 +189,49 @@ class Node {
// choose draw method depending on the shape
switch (this.options.shape) {
case 'database':
this.shape = new Database(this.options, this.body, this.labelModule);
break;
case 'box':
this.shape = new Box(this.options, this.body, this.labelModule);
break;
case 'circle':
this.shape = new Circle(this.options, this.body, this.labelModule);
break;
case 'ellipse':
this.shape = new Ellipse(this.options, this.body, this.labelModule);
break;
// TODO: add diamond shape
case 'image':
this.shape = new Image(this.options, this.body, this.labelModule, this.imageObj);
break;
case 'circularImage':
this.shape = new CircularImage(this.options, this.body, this.labelModule, this.imageObj);
break;
case 'text':
this.shape = new Text(this.options, this.body, this.labelModule);
case 'database':
this.shape = new Database(this.options, this.body, this.labelModule);
break;
case 'diamond':
this.shape = new Diamond(this.options, this.body, this.labelModule);
break;
case 'dot':
this.shape = new Dot(this.options, this.body, this.labelModule);
break;
case 'ellipse':
this.shape = new Ellipse(this.options, this.body, this.labelModule);
break;
case 'icon':
this.shape = new Icon(this.options, this.body, this.labelModule);
break;
case 'image':
this.shape = new Image(this.options, this.body, this.labelModule, this.imageObj);
break;
case 'square':
this.shape = new Square(this.options, this.body, this.labelModule);
break;
case 'star':
this.shape = new Star(this.options, this.body, this.labelModule);
break;
case 'text':
this.shape = new Text(this.options, this.body, this.labelModule);
break;
case 'triangle':
this.shape = new Triangle(this.options, this.body, this.labelModule);
break;
case 'triangleDown':
this.shape = new TriangleDown(this.options, this.body, this.labelModule);
break;
case 'star':
this.shape = new Star(this.options, this.body, this.labelModule);
break;
case 'icon':
this.shape = new Icon(this.options, this.body, this.labelModule);
break;
default:
this.shape = new Ellipse(this.options, this.body, this.labelModule);
break;

+ 2
- 2
lib/network/modules/components/edges/bezierEdgeDynamic.js View File

@ -2,9 +2,9 @@
* Created by Alex on 3/20/2015.
*/
import BezierBaseEdge from './util/bezierBaseEdge'
import BezierEdgeBase from './util/BezierEdgeBase'
class BezierEdgeDynamic extends BezierBaseEdge {
class BezierEdgeDynamic extends BezierEdgeBase {
constructor(options, body, labelModule) {
this.via = undefined;
super(options, body, labelModule); // --> this calls the setOptions below

+ 2
- 2
lib/network/modules/components/edges/bezierEdgeStatic.js View File

@ -2,9 +2,9 @@
* Created by Alex on 3/20/2015.
*/
import BezierBaseEdge from './util/bezierBaseEdge'
import BezierEdgeBase from './util/BezierEdgeBase'
class BezierEdgeStatic extends BezierBaseEdge {
class BezierEdgeStatic extends BezierEdgeBase {
constructor(options, body, labelModule) {
super(options, body, labelModule);
}

+ 2
- 2
lib/network/modules/components/edges/straightEdge.js View File

@ -2,9 +2,9 @@
* Created by Alex on 3/20/2015.
*/
import BaseEdge from './util/baseEdge'
import EdgeBase from './util/EdgeBase'
class StraightEdge extends BaseEdge {
class StraightEdge extends EdgeBase {
constructor(options, body, labelModule) {
super(options, body, labelModule);
}

lib/network/modules/components/edges/util/bezierBaseEdge.js → lib/network/modules/components/edges/util/BezierEdgeBase.js View File

@ -2,9 +2,9 @@
* Created by Alex on 3/20/2015.
*/
import BaseEdge from './baseEdge'
import EdgeBase from './EdgeBase'
class BezierBaseEdge extends BaseEdge {
class BezierEdgeBase extends EdgeBase {
constructor(options, body, labelModule) {
super(options, body, labelModule);
}
@ -110,4 +110,4 @@ class BezierBaseEdge extends BaseEdge {
}
}
export default BezierBaseEdge;
export default BezierEdgeBase;

lib/network/modules/components/edges/util/baseEdge.js → lib/network/modules/components/edges/util/EdgeBase.js View File

@ -3,7 +3,7 @@
*/
var util = require("../../../../../util")
class BaseEdge {
class EdgeBase {
constructor(options, body, labelModule) {
this.body = body;
this.labelModule = labelModule;
@ -452,4 +452,4 @@ class BaseEdge {
}
export default BaseEdge;
export default EdgeBase;

+ 26
- 0
lib/network/modules/components/nodes/shapes/Diamond.js View File

@ -0,0 +1,26 @@
/**
* Created by Alex on 3/18/2015.
*/
'use strict';
import ShapeBase from '../util/ShapeBase'
class Diamond extends ShapeBase {
constructor(options, body, labelModule) {
super(options, body, labelModule)
}
resize(ctx) {
this._resizeShape();
}
draw(ctx, x, y, selected, hover) {
this._drawShape(ctx, 'diamond', 4, x, y, selected, hover);
}
distanceToBorder(ctx, angle) {
return this._distanceToBorder(angle);
}
}
export default Diamond;

lib/network/modules/components/nodes/shapes/triangle.js → lib/network/modules/components/nodes/shapes/Triangle.js View File

@ -3,9 +3,9 @@
*/
'use strict';
import ShapeUtil from '../util/shapeUtil'
import ShapeBase from '../util/ShapeBase'
class Triangle extends ShapeUtil {
class Triangle extends ShapeBase {
constructor(options, body, labelModule) {
super(options, body, labelModule)
}

+ 3
- 3
lib/network/modules/components/nodes/shapes/box.js View File

@ -3,9 +3,9 @@
*/
'use strict';
import BaseNode from '../util/baseNode'
import NodeBase from '../util/NodeBase'
class Box extends BaseNode {
class Box extends NodeBase {
constructor (options, body, labelModule) {
super(options,body,labelModule);
}
@ -26,7 +26,7 @@ class Box extends BaseNode {
var borderWidth = this.options.borderWidth;
var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;
console.log(this)
ctx.strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border;
ctx.lineWidth = (selected ? selectionLineWidth : borderWidth);
ctx.lineWidth /= this.body.view.scale;

+ 2
- 2
lib/network/modules/components/nodes/shapes/circle.js View File

@ -3,9 +3,9 @@
*/
'use strict';
import DrawUtil from '../util/drawUtil'
import CircleImageBase from '../util/CircleImageBase'
class Circle extends DrawUtil {
class Circle extends CircleImageBase {
constructor(options, body, labelModule) {
super(options, body, labelModule)
}

+ 2
- 2
lib/network/modules/components/nodes/shapes/circularImage.js View File

@ -4,9 +4,9 @@
'use strict';
import drawUtil from '../util/drawUtil'
import CircleImageBase from '../util/CircleImageBase'
class CircularImage extends drawUtil {
class CircularImage extends CircleImageBase {
constructor (options, body, labelModule, imageObj) {
super(options, body, labelModule);
this.imageObj = imageObj;

+ 2
- 2
lib/network/modules/components/nodes/shapes/database.js View File

@ -3,9 +3,9 @@
*/
'use strict';
import BaseNode from '../util/baseNode'
import NodeBase from '../util/NodeBase'
class Database extends BaseNode {
class Database extends NodeBase {
constructor (options, body, labelModule) {
super(options, body, labelModule);
}

+ 2
- 2
lib/network/modules/components/nodes/shapes/dot.js View File

@ -3,9 +3,9 @@
*/
'use strict';
import ShapeUtil from '../util/shapeUtil'
import ShapeBase from '../util/ShapeBase'
class Dot extends ShapeUtil {
class Dot extends ShapeBase {
constructor(options, body, labelModule) {
super(options, body, labelModule)
}

+ 2
- 2
lib/network/modules/components/nodes/shapes/ellipse.js View File

@ -3,9 +3,9 @@
*/
'use strict';
import BaseNode from '../util/baseNode'
import NodeBase from '../util/NodeBase'
class Ellipse extends BaseNode {
class Ellipse extends NodeBase {
constructor(options, body, labelModule) {
super(options, body, labelModule);
}

+ 3
- 1
lib/network/modules/components/nodes/shapes/empty.js View File

@ -3,7 +3,9 @@
*/
'use strict';
class Empty extends BaseNode {
import NodeBase from '../util/NodeBase'
class Empty extends NodeBase {
constructor (options, body, labelModule) {
super(options, body, labelModule);
}

+ 2
- 2
lib/network/modules/components/nodes/shapes/icon.js View File

@ -3,9 +3,9 @@
*/
'use strict';
import BaseNode from '../util/baseNode'
import NodeBase from '../util/NodeBase'
class Icon extends BaseNode {
class Icon extends NodeBase {
constructor(options, body, labelModule) {
super(options, body, labelModule);
}

+ 2
- 3
lib/network/modules/components/nodes/shapes/image.js View File

@ -3,9 +3,9 @@
*/
'use strict';
import drawUtil from '../util/drawUtil'
import CircleImageBase from '../util/CircleImageBase'
class Image extends drawUtil {
class Image extends CircleImageBase {
constructor (options, body, labelModule, imageObj) {
super(options, body, labelModule);
this.imageObj = imageObj;
@ -53,7 +53,6 @@ class Image extends drawUtil {
}
distanceToBorder(ctx, angle) {
console.log(this.width)
this.resize(ctx);
var a = this.width / 2;
var b = this.height / 2;

+ 2
- 2
lib/network/modules/components/nodes/shapes/square.js View File

@ -3,9 +3,9 @@
*/
'use strict';
import ShapeUtil from '../util/shapeUtil'
import ShapeBase from '../util/ShapeBase'
class Square extends ShapeUtil {
class Square extends ShapeBase {
constructor(options, body, labelModule) {
super(options, body, labelModule)
}

+ 2
- 2
lib/network/modules/components/nodes/shapes/star.js View File

@ -3,9 +3,9 @@
*/
'use strict';
import ShapeUtil from '../util/shapeUtil'
import ShapeBase from '../util/ShapeBase'
class Star extends ShapeUtil {
class Star extends ShapeBase {
constructor(options, body, labelModule) {
super(options, body, labelModule)
}

+ 2
- 2
lib/network/modules/components/nodes/shapes/text.js View File

@ -3,9 +3,9 @@
*/
'use strict';
import BaseNode from '../util/baseNode'
import NodeBase from '../util/NodeBase'
class Text extends BaseNode {
class Text extends NodeBase {
constructor(options, body, labelModule) {
super(options, body, labelModule);
}

+ 2
- 2
lib/network/modules/components/nodes/shapes/triangleDown.js View File

@ -3,9 +3,9 @@
*/
'use strict';
import ShapeUtil from '../util/shapeUtil'
import ShapeBase from '../util/ShapeBase'
class TriangleDown extends ShapeUtil {
class TriangleDown extends ShapeBase {
constructor(options, body, labelModule) {
super(options, body, labelModule)
}

lib/network/modules/components/nodes/util/drawUtil.js → lib/network/modules/components/nodes/util/CircleImageBase.js View File

@ -1,9 +1,9 @@
/**
* Created by Alex on 3/19/2015.
*/
import BaseNode from '../util/baseNode'
import NodeBase from '../util/NodeBase'
class drawUtil extends BaseNode {
class CircleImageBase extends NodeBase {
constructor(options, body, labelModule) {
super(options, body, labelModule);
}
@ -51,4 +51,4 @@ class drawUtil extends BaseNode {
}
}
export default drawUtil;
export default CircleImageBase;

lib/network/modules/components/nodes/util/baseNode.js → lib/network/modules/components/nodes/util/NodeBase.js View File

@ -2,7 +2,7 @@
* Created by Alex on 3/19/2015.
*/
class BaseNode {
class NodeBase {
constructor(options, body, labelModule) {
this.body = body;
this.labelModule = labelModule;
@ -25,4 +25,4 @@ class BaseNode {
}
}
export default BaseNode;
export default NodeBase;

lib/network/modules/components/nodes/util/shapeUtil.js → lib/network/modules/components/nodes/util/ShapeBase.js View File

@ -1,9 +1,9 @@
/**
* Created by Alex on 3/19/2015.
*/
import BaseNode from '../util/baseNode'
import NodeBase from '../util/NodeBase'
class ShapeUtil extends BaseNode {
class ShapeBase extends NodeBase {
constructor(options, body, labelModule) {
super(options, body, labelModule)
}
@ -30,7 +30,7 @@ class ShapeUtil extends BaseNode {
ctx.lineWidth /= this.body.view.scale;
ctx.lineWidth = Math.min(this.width, ctx.lineWidth);
ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
ctx[shape](x, y, this.options.size);
ctx[shape](x, y, this.options.size + sizeMultiplier * ctx.lineWidth);
ctx.fill();
ctx.stroke();
@ -40,7 +40,8 @@ class ShapeUtil extends BaseNode {
this.boundingBox.bottom = y + this.options.size;
if (this.options.label!== undefined) {
this.labelModule.draw(ctx, x, y + 0.5* this.height, selected, 'hanging');
let yLabel = y + 0.5 * this.height + 3 + sizeMultiplier * ctx.lineWidth; // the + 3 is to offset it a bit below the node.
this.labelModule.draw(ctx, x, yLabel, selected, 'hanging');
this.boundingBox.left = Math.min(this.boundingBox.left, this.labelModule.size.left);
this.boundingBox.right = Math.max(this.boundingBox.right, this.labelModule.size.left + this.labelModule.size.width);
this.boundingBox.bottom = Math.max(this.boundingBox.bottom, this.boundingBox.bottom + this.labelModule.size.height);
@ -49,4 +50,4 @@ class ShapeUtil extends BaseNode {
}
export default ShapeUtil;
export default ShapeBase;

+ 78
- 41
lib/network/shapes.js View File

@ -6,9 +6,9 @@ if (typeof CanvasRenderingContext2D !== 'undefined') {
/**
* Draw a circle shape
*/
CanvasRenderingContext2D.prototype.circle = function(x, y, r) {
CanvasRenderingContext2D.prototype.circle = function (x, y, r) {
this.beginPath();
this.arc(x, y, r, 0, 2*Math.PI, false);
this.arc(x, y, r, 0, 2 * Math.PI, false);
};
/**
@ -17,7 +17,7 @@ if (typeof CanvasRenderingContext2D !== 'undefined') {
* @param {Number} y vertical center
* @param {Number} r size, width and height of the square
*/
CanvasRenderingContext2D.prototype.square = function(x, y, r) {
CanvasRenderingContext2D.prototype.square = function (x, y, r) {
this.beginPath();
this.rect(x - r, y - r, r * 2, r * 2);
};
@ -28,20 +28,27 @@ if (typeof CanvasRenderingContext2D !== 'undefined') {
* @param {Number} y vertical center
* @param {Number} r radius, half the length of the sides of the triangle
*/
CanvasRenderingContext2D.prototype.triangle = function(x, y, r) {
CanvasRenderingContext2D.prototype.triangle = function (x, y, r) {
// http://en.wikipedia.org/wiki/Equilateral_triangle
this.beginPath();
// the change in radius and the offset is here to center the shape
r *= 1.15;
y += 0.275 * r;
var s = r * 2;
var s2 = s / 2;
var ir = Math.sqrt(3) / 6 * s; // radius of inner circle
var h = Math.sqrt(s * s - s2 * s2); // height
this.moveTo(x, y - (h - ir));
this.lineTo(x + s2, y + ir);
this.lineTo(x - s2, y + ir);
this.lineTo(x, y - (h - ir));
this.closePath();
};
/**
@ -50,10 +57,14 @@ if (typeof CanvasRenderingContext2D !== 'undefined') {
* @param {Number} y vertical center
* @param {Number} r radius
*/
CanvasRenderingContext2D.prototype.triangleDown = function(x, y, r) {
CanvasRenderingContext2D.prototype.triangleDown = function (x, y, r) {
// http://en.wikipedia.org/wiki/Equilateral_triangle
this.beginPath();
// the change in radius and the offset is here to center the shape
r *= 1.15;
y -= 0.275 * r;
var s = r * 2;
var s2 = s / 2;
var ir = Math.sqrt(3) / 6 * s; // radius of inner circle
@ -72,51 +83,78 @@ if (typeof CanvasRenderingContext2D !== 'undefined') {
* @param {Number} y vertical center
* @param {Number} r radius, half the length of the sides of the triangle
*/
CanvasRenderingContext2D.prototype.star = function(x, y, r) {
CanvasRenderingContext2D.prototype.star = function (x, y, r) {
// http://www.html5canvastutorials.com/labs/html5-canvas-star-spinner/
this.beginPath();
// the change in radius and the offset is here to center the shape
r *= 0.82;
y += 0.1 * r;
for (var n = 0; n < 10; n++) {
var radius = (n % 2 === 0) ? r * 1.3 : r * 0.5;
this.lineTo(
x + radius * Math.sin(n * 2 * Math.PI / 10),
y - radius * Math.cos(n * 2 * Math.PI / 10)
x + radius * Math.sin(n * 2 * Math.PI / 10),
y - radius * Math.cos(n * 2 * Math.PI / 10)
);
}
this.closePath();
};
/**
* Draw a Diamond shape
* @param {Number} x horizontal center
* @param {Number} y vertical center
* @param {Number} r radius, half the length of the sides of the triangle
*/
CanvasRenderingContext2D.prototype.diamond = function (x, y, r) {
// http://www.html5canvastutorials.com/labs/html5-canvas-star-spinner/
this.beginPath();
this.lineTo(x, y + r);
this.lineTo(x + r, y);
this.lineTo(x, y - r);
this.lineTo(x - r, y);
this.closePath();
};
/**
* http://stackoverflow.com/questions/1255512/how-to-draw-a-rounded-rectangle-on-html-canvas
*/
CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {
var r2d = Math.PI/180;
if( w - ( 2 * r ) < 0 ) { r = ( w / 2 ); } //ensure that the radius isn't too large for x
if( h - ( 2 * r ) < 0 ) { r = ( h / 2 ); } //ensure that the radius isn't too large for y
CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r) {
var r2d = Math.PI / 180;
if (w - ( 2 * r ) < 0) {
r = ( w / 2 );
} //ensure that the radius isn't too large for x
if (h - ( 2 * r ) < 0) {
r = ( h / 2 );
} //ensure that the radius isn't too large for y
this.beginPath();
this.moveTo(x+r,y);
this.lineTo(x+w-r,y);
this.arc(x+w-r,y+r,r,r2d*270,r2d*360,false);
this.lineTo(x+w,y+h-r);
this.arc(x+w-r,y+h-r,r,0,r2d*90,false);
this.lineTo(x+r,y+h);
this.arc(x+r,y+h-r,r,r2d*90,r2d*180,false);
this.lineTo(x,y+r);
this.arc(x+r,y+r,r,r2d*180,r2d*270,false);
this.moveTo(x + r, y);
this.lineTo(x + w - r, y);
this.arc(x + w - r, y + r, r, r2d * 270, r2d * 360, false);
this.lineTo(x + w, y + h - r);
this.arc(x + w - r, y + h - r, r, 0, r2d * 90, false);
this.lineTo(x + r, y + h);
this.arc(x + r, y + h - r, r, r2d * 90, r2d * 180, false);
this.lineTo(x, y + r);
this.arc(x + r, y + r, r, r2d * 180, r2d * 270, false);
};
/**
* http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
*/
CanvasRenderingContext2D.prototype.ellipse = function(x, y, w, h) {
CanvasRenderingContext2D.prototype.ellipse = function (x, y, w, h) {
var kappa = .5522848,
ox = (w / 2) * kappa, // control point offset horizontal
oy = (h / 2) * kappa, // control point offset vertical
xe = x + w, // x-end
ye = y + h, // y-end
xm = x + w / 2, // x-middle
ym = y + h / 2; // y-middle
ox = (w / 2) * kappa, // control point offset horizontal
oy = (h / 2) * kappa, // control point offset vertical
xe = x + w, // x-end
ye = y + h, // y-end
xm = x + w / 2, // x-middle
ym = y + h / 2; // y-middle
this.beginPath();
this.moveTo(x, ym);
@ -127,24 +165,23 @@ if (typeof CanvasRenderingContext2D !== 'undefined') {
};
/**
* http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
*/
CanvasRenderingContext2D.prototype.database = function(x, y, w, h) {
var f = 1/3;
CanvasRenderingContext2D.prototype.database = function (x, y, w, h) {
var f = 1 / 3;
var wEllipse = w;
var hEllipse = h * f;
var kappa = .5522848,
ox = (wEllipse / 2) * kappa, // control point offset horizontal
oy = (hEllipse / 2) * kappa, // control point offset vertical
xe = x + wEllipse, // x-end
ye = y + hEllipse, // y-end
xm = x + wEllipse / 2, // x-middle
ym = y + hEllipse / 2, // y-middle
ymb = y + (h - hEllipse/2), // y-midlle, bottom ellipse
yeb = y + h; // y-end, bottom ellipse
ox = (wEllipse / 2) * kappa, // control point offset horizontal
oy = (hEllipse / 2) * kappa, // control point offset vertical
xe = x + wEllipse, // x-end
ye = y + hEllipse, // y-end
xm = x + wEllipse / 2, // x-middle
ym = y + hEllipse / 2, // y-middle
ymb = y + (h - hEllipse / 2), // y-midlle, bottom ellipse
yeb = y + h; // y-end, bottom ellipse
this.beginPath();
this.moveTo(xe, ym);
@ -167,7 +204,7 @@ if (typeof CanvasRenderingContext2D !== 'undefined') {
/**
* Draw an arrow point (no line)
*/
CanvasRenderingContext2D.prototype.arrow = function(x, y, angle, length) {
CanvasRenderingContext2D.prototype.arrow = function (x, y, angle, length) {
// tail
var xt = x - length * Math.cos(angle);
var yt = y - length * Math.sin(angle);
@ -199,7 +236,7 @@ if (typeof CanvasRenderingContext2D !== 'undefined') {
* @author David Jordan
* @date 2012-08-08
*/
CanvasRenderingContext2D.prototype.dashedLine = function(x,y,x2,y2,dashArray){
CanvasRenderingContext2D.prototype.dashedLine = function (x, y, x2, y2, dashArray) {
if (!dashArray) dashArray = [10, 5];
if (dashLength == 0) dashLength = 0.001; // Hack for Safari
var dashCount = dashArray.length;

Loading…
Cancel
Save