Skip to content
This repository has been archived by the owner on Mar 21, 2022. It is now read-only.

Commit

Permalink
path functions to graphics (pdf)
Browse files Browse the repository at this point in the history
  • Loading branch information
@niklauslee
niklauslee committed Nov 1, 2016
1 parent 948b644 commit 4a6ea9b
Show file tree
Hide file tree
Showing 4 changed files with 255 additions and 119 deletions.
89 changes: 88 additions & 1 deletion core/Graphics.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1195,7 +1195,7 @@ define(function (require, exports, module) {
this.context.globalAlpha = this.alpha;
if (dashPattern) {
this.context.setLineDash(dashPattern);
}
}
this.context.moveTo(x + radius, y);
this.context.lineTo(x + w - radius, y);
this.context.quadraticCurveTo(x + w, y, x + w, y + radius);
Expand Down Expand Up @@ -1555,6 +1555,93 @@ define(function (require, exports, module) {
this.restoreTransform();
};

/**
* Draw a path.
* A path command is one of the followings:
* ['M', x, y] - moveTo
* ['L', x, y] - lineTo
* ['C', x1, y1, x2, y2, x, y] - bezierCurveTo
* ['Q', x1, y1, x, 2] - quadraticCurveTo
* ['Z'] - closePath
*
* @param {Array.<Array>}
*/
Canvas.prototype.path = function (commands) {
this.transform();
this.context.beginPath();
this.context.strokeStyle = this.color;
this.context.lineWidth = this.lineWidth;
this.context.globalAlpha = this.alpha;
for (var i = 0, len = commands.length; i < len; i++) {
var comm = commands[i];
switch (comm[0]) {
case 'M':
this.context.moveTo(comm[1], comm[2]);
break;
case 'L':
this.context.lineTo(comm[1], comm[2]);
break;
case 'C':
this.context.bezierCurveTo(comm[1], comm[2], comm[3], comm[4], comm[5], comm[6]);
break;
case 'Q':
this.context.quadraticCurveTo(comm[1], comm[2], comm[3], comm[4]);
break;
case 'Z':
this.context.closePath();
break;
}
}
this.context.stroke();
this.restoreTransform();
};

/**
* Draw a filled path
* A path command is one of the followings:
* ['M', x, y] - moveTo
* ['L', x, y] - lineTo
* ['C', x1, y1, x2, y2, x, y] - bezierCurveTo
* ['Q', x1, y1, x, 2] - quadraticCurveTo
* ['Z'] - closePath
*
* @param {Array.<Array>}
* @param {boolean} doStroke
*/
Canvas.prototype.fillPath = function (commands, doStroke) {
this.transform();
this.context.beginPath();
this.context.strokeStyle = this.color;
this.context.fillStyle = this.fillColor;
this.context.lineWidth = this.lineWidth;
this.context.globalAlpha = this.alpha;
for (var i = 0, len = commands.length; i < len; i++) {
var comm = commands[i];
switch (comm[0]) {
case 'M':
this.context.moveTo(comm[1], comm[2]);
break;
case 'L':
this.context.lineTo(comm[1], comm[2]);
break;
case 'C':
this.context.bezierCurveTo(comm[1], comm[2], comm[3], comm[4], comm[5], comm[6]);
break;
case 'Q':
this.context.quadraticCurveTo(comm[1], comm[2], comm[3], comm[4]);
break;
case 'Z':
this.context.closePath();
break;
}
}
this.context.fill();
if (doStroke) {
this.context.stroke();
}
this.restoreTransform();
};

/**
* Word Wrap
* @param {string} text
Expand Down
170 changes: 56 additions & 114 deletions flowchart/Flowchart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,8 @@ define(function (require, exports, module) {
MERGE_MINWIDTH = 30,
MERGE_MINHEIGHT = 25,
EXTRACT_MINWIDTH = 30,
EXTRACT_MINHEIGHT = 25;
EXTRACT_MINHEIGHT = 25;

/**
* FCModelElement
* @constructor
Expand Down Expand Up @@ -91,7 +91,7 @@ define(function (require, exports, module) {
return "FlowchartDiagram";
};


/**
* FCProcess
* @constructor
Expand Down Expand Up @@ -734,21 +734,12 @@ define(function (require, exports, module) {
FCDocumentView.prototype.drawDocument = function (canvas, rect) {
var h = Math.floor(rect.getHeight() / 6),
g = Math.floor(rect.getWidth() / 3);
canvas.transform();
canvas.context.beginPath();
canvas.context.strokeStyle = canvas.color;
canvas.context.fillStyle = canvas.fillColor;
canvas.context.lineWidth = canvas.lineWidth;
canvas.context.globalAlpha = canvas.alpha;
canvas.context.moveTo(rect.x1, rect.y1);
canvas.context.lineTo(rect.x2, rect.y1);
canvas.context.lineTo(rect.x2, rect.y2);
canvas.context.bezierCurveTo(rect.x2 - g, rect.y2 - (h * 2), rect.x1 + g, rect.y2 + (h * 1.5), rect.x1, rect.y2 - h);
canvas.context.lineTo(rect.x1, rect.y1);
canvas.context.closePath();
canvas.context.fill();
canvas.context.stroke();
canvas.restoreTransform();
canvas.fillPath([['M', rect.x1, rect.y1],
['L', rect.x2, rect.y1],
['L', rect.x2, rect.y2],
['C', rect.x2 - g, rect.y2 - (h * 2), rect.x1 + g, rect.y2 + (h * 1.5), rect.x1, rect.y2 - h],
['L', rect.x1, rect.y1],
['Z']], true);
};

FCDocumentView.prototype.drawObject = function (canvas) {
Expand Down Expand Up @@ -853,23 +844,14 @@ define(function (require, exports, module) {
var r = new Rect(this.left, this.top, this.getRight(), this.getBottom()),
m = (r.y1 + r.y2) / 2,
g = Math.floor(this.width / 6);
canvas.transform();
canvas.context.beginPath();
canvas.context.strokeStyle = canvas.color;
canvas.context.fillStyle = canvas.fillColor;
canvas.context.lineWidth = canvas.lineWidth;
canvas.context.globalAlpha = canvas.alpha;
canvas.context.moveTo(r.x1, m);
canvas.context.lineTo(r.x1 + g, r.y1);
canvas.context.lineTo(r.x2 - g, r.y1);
canvas.context.quadraticCurveTo(r.x2, r.y1, r.x2, m);
canvas.context.quadraticCurveTo(r.x2, r.y2, r.x2 - g, r.y2);
canvas.context.lineTo(r.x1 + g, r.y2);
canvas.context.lineTo(r.x1, m);
canvas.context.closePath();
canvas.context.fill();
canvas.context.stroke();
canvas.restoreTransform();
canvas.fillPath([['M', r.x1, m],
['L', r.x1 + g, r.y1],
['L', r.x2 - g, r.y1],
['Q', r.x2, r.y1, r.x2, m],
['Q', r.x2, r.y2, r.x2 - g, r.y2],
['L', r.x1 + g, r.y2],
['L', r.x1, m],
['Z']], true);
FCGeneralNodeView.prototype.drawObject.call(this, canvas);
};

Expand Down Expand Up @@ -995,22 +977,13 @@ define(function (require, exports, module) {
FCPunchedTapeView.prototype.drawObject = function (canvas) {
var r = new Rect(this.left, this.top, this.getRight(), this.getBottom()),
h = Math.floor(r.getHeight() / 6),
g = Math.floor(r.getWidth() / 3);
canvas.transform();
canvas.context.beginPath();
canvas.context.strokeStyle = canvas.color;
canvas.context.fillStyle = canvas.fillColor;
canvas.context.lineWidth = canvas.lineWidth;
canvas.context.globalAlpha = canvas.alpha;
canvas.context.moveTo(r.x1, r.y1);
canvas.context.bezierCurveTo(r.x1 + g, r.y1 + (h * 2), r.x2 - g, r.y1 - (h * 1.5), r.x2, r.y1 + h);
canvas.context.lineTo(r.x2, r.y2);
canvas.context.bezierCurveTo(r.x2 - g, r.y2 - (h * 2), r.x1 + g, r.y2 + (h * 1.5), r.x1, r.y2 - h);
canvas.context.lineTo(r.x1, r.y1);
canvas.context.closePath();
canvas.context.fill();
canvas.context.stroke();
canvas.restoreTransform();
g = Math.floor(r.getWidth() / 3);
canvas.fillPath([['M', r.x1, r.y1],
['C', r.x1 + g, r.y1 + (h * 2), r.x2 - g, r.y1 - (h * 1.5), r.x2, r.y1 + h],
['L', r.x2, r.y2],
['C', r.x2 - g, r.y2 - (h * 2), r.x1 + g, r.y2 + (h * 1.5), r.x1, r.y2 - h],
['L', r.x1, r.y1],
['Z']], true);
FCGeneralNodeView.prototype.drawObject.call(this, canvas);
};

Expand Down Expand Up @@ -1329,24 +1302,15 @@ define(function (require, exports, module) {
kappa = 0.5522848,
ox = g * kappa, // control point offset horizontal
oy = (h / 2) * kappa; // control point offset vertical

canvas.transform();
canvas.context.beginPath();
canvas.context.strokeStyle = canvas.color;
canvas.context.fillStyle = canvas.fillColor;
canvas.context.lineWidth = canvas.lineWidth;
canvas.context.globalAlpha = canvas.alpha;
canvas.context.moveTo(r.x2, r.y1);
canvas.context.bezierCurveTo(r.x2 - ox, r.y1, r.x2 - g, ym - oy, r.x2 - g, ym);
canvas.context.bezierCurveTo(r.x2 - g, ym + oy, r.x2 - ox, r.y2, r.x2, r.y2);
canvas.context.lineTo(r.x1 + g, r.y2);
canvas.context.bezierCurveTo(r.x1 + g - ox, r.y2, r.x1, ym + oy, r.x1, ym);
canvas.context.bezierCurveTo(r.x1, ym - oy, r.x1 + g - ox, r.y1, r.x1 + g, r.y1);
canvas.context.lineTo(r.x2, r.y1);
canvas.context.closePath();
canvas.context.fill();
canvas.context.stroke();
canvas.restoreTransform();

canvas.fillPath([['M', r.x2, r.y1],
['C', r.x2 - ox, r.y1, r.x2 - g, ym - oy, r.x2 - g, ym],
['C', r.x2 - g, ym + oy, r.x2 - ox, r.y2, r.x2, r.y2],
['L', r.x1 + g, r.y2],
['C', r.x1 + g - ox, r.y2, r.x1, ym + oy, r.x1, ym],
['C', r.x1, ym - oy, r.x1 + g - ox, r.y1, r.x1 + g, r.y1],
['L', r.x2, r.y1],
['Z']], true);
FCGeneralNodeView.prototype.drawObject.call(this, canvas);
};

Expand Down Expand Up @@ -1379,29 +1343,18 @@ define(function (require, exports, module) {
kappa = 0.5522848,
ox = (w / 2) * kappa, // control point offset horizontal
oy = g * kappa; // control point offset vertical

canvas.transform();
canvas.context.beginPath();
canvas.context.strokeStyle = canvas.color;
canvas.context.fillStyle = canvas.fillColor;
canvas.context.lineWidth = canvas.lineWidth;
canvas.context.globalAlpha = canvas.alpha;
canvas.context.moveTo(r.x1, r.y1 + g);
canvas.context.bezierCurveTo(r.x1, r.y1 + g - oy, xm - ox, r.y1, xm, r.y1);
canvas.context.bezierCurveTo(xm + ox, r.y1, r.x2, r.y1 + g - oy, r.x2, r.y1 + g);
canvas.context.lineTo(r.x2, r.y2 - g);
canvas.context.bezierCurveTo(r.x2, r.y2 - g + oy, xm + ox, r.y2, xm, r.y2);
canvas.context.bezierCurveTo(xm - ox, r.y2, r.x1, r.y2 - g + oy, r.x1, r.y2 - g);
canvas.context.lineTo(r.x1, r.y1 + g);
canvas.context.closePath();
canvas.context.fill();
canvas.context.stroke();
canvas.context.beginPath();
canvas.context.moveTo(r.x1, r.y1 + g);
canvas.context.bezierCurveTo(r.x1, r.y1 + g + oy, xm - ox, r.y1 + (g * 2), xm, r.y1 + (g * 2));
canvas.context.bezierCurveTo(xm + ox, r.y1 + (g * 2), r.x2, r.y1 + g + oy, r.x2, r.y1 + g);
canvas.context.stroke();
canvas.restoreTransform();

canvas.fillPath([['M', r.x1, r.y1 + g],
['C', r.x1, r.y1 + g - oy, xm - ox, r.y1, xm, r.y1],
['C', xm + ox, r.y1, r.x2, r.y1 + g - oy, r.x2, r.y1 + g],
['L', r.x2, r.y2 - g],
['C', r.x2, r.y2 - g + oy, xm + ox, r.y2, xm, r.y2],
['C', xm - ox, r.y2, r.x1, r.y2 - g + oy, r.x1, r.y2 - g],
['L', r.x1, r.y1 + g],
['Z']], true);
canvas.path([['M', r.x1, r.y1 + g],
['C', r.x1, r.y1 + g + oy, xm - ox, r.y1 + (g * 2), xm, r.y1 + (g * 2)],
['C', xm + ox, r.y1 + (g * 2), r.x2, r.y1 + g + oy, r.x2, r.y1 + g]]);
FCGeneralNodeView.prototype.drawObject.call(this, canvas);
};

Expand Down Expand Up @@ -1435,28 +1388,17 @@ define(function (require, exports, module) {
ox = g * kappa, // control point offset horizontal
oy = (h / 2) * kappa; // control point offset vertical

canvas.transform();
canvas.context.beginPath();
canvas.context.strokeStyle = canvas.color;
canvas.context.fillStyle = canvas.fillColor;
canvas.context.lineWidth = canvas.lineWidth;
canvas.context.globalAlpha = canvas.alpha;
canvas.context.moveTo(r.x2 - g, r.y1);
canvas.context.bezierCurveTo(r.x2 - g + ox, r.y1, r.x2, ym - oy, r.x2, ym);
canvas.context.bezierCurveTo(r.x2, ym + oy, r.x2 - g + ox, r.y2, r.x2 - g, r.y2);
canvas.context.lineTo(r.x1 + g, r.y2);
canvas.context.bezierCurveTo(r.x1 + g - ox, r.y2, r.x1, ym + oy, r.x1, ym);
canvas.context.bezierCurveTo(r.x1, ym - oy, r.x1 + g - ox, r.y1, r.x1 + g, r.y1);
canvas.context.lineTo(r.x2 - g, r.y1);
canvas.context.closePath();
canvas.context.fill();
canvas.context.stroke();
canvas.context.beginPath();
canvas.context.moveTo(r.x2 - g, r.y1);
canvas.context.bezierCurveTo(r.x2 - g - ox, r.y1, r.x2 - (g * 2), ym - oy, r.x2 - (g * 2), ym);
canvas.context.bezierCurveTo(r.x2 - (g * 2), ym + oy, r.x2 - g - ox, r.y2, r.x2 - g, r.y2);
canvas.context.stroke();
canvas.restoreTransform();
canvas.fillPath([['M', r.x2 - g, r.y1],
['C', r.x2 - g + ox, r.y1, r.x2, ym - oy, r.x2, ym],
['C', r.x2, ym + oy, r.x2 - g + ox, r.y2, r.x2 - g, r.y2],
['L', r.x1 + g, r.y2],
['C', r.x1 + g - ox, r.y2, r.x1, ym + oy, r.x1, ym],
['C', r.x1, ym - oy, r.x1 + g - ox, r.y1, r.x1 + g, r.y1],
['L', r.x2 - g, r.y1],
['Z']], true);
canvas.path([['M', r.x2 - g, r.y1],
['C', r.x2 - g - ox, r.y1, r.x2 - (g * 2), ym - oy, r.x2 - (g * 2), ym],
['C', r.x2 - (g * 2), ym + oy, r.x2 - g - ox, r.y2, r.x2 - g, r.y2]]);
FCGeneralNodeView.prototype.drawObject.call(this, canvas);
};

Expand Down
Loading

0 comments on commit 4a6ea9b

Please sign in to comment.