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

Commit 4a6ea9b

Browse files
niklausleeniklauslee
committed
path functions to graphics (pdf)
1 parent 948b644 commit 4a6ea9b

4 files changed

Lines changed: 255 additions & 119 deletions

File tree

‎core/Graphics.js‎

Lines changed: 88 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1195,7 +1195,7 @@ define(function (require, exports, module) {
11951195
this.context.globalAlpha = this.alpha;
11961196
if (dashPattern) {
11971197
this.context.setLineDash(dashPattern);
1198-
}
1198+
}
11991199
this.context.moveTo(x + radius, y);
12001200
this.context.lineTo(x + w - radius, y);
12011201
this.context.quadraticCurveTo(x + w, y, x + w, y + radius);
@@ -1555,6 +1555,93 @@ define(function (require, exports, module) {
15551555
this.restoreTransform();
15561556
};
15571557

1558+
/**
1559+
* Draw a path.
1560+
* A path command is one of the followings:
1561+
* ['M', x, y] - moveTo
1562+
* ['L', x, y] - lineTo
1563+
* ['C', x1, y1, x2, y2, x, y] - bezierCurveTo
1564+
* ['Q', x1, y1, x, 2] - quadraticCurveTo
1565+
* ['Z'] - closePath
1566+
*
1567+
* @param {Array.<Array>}
1568+
*/
1569+
Canvas.prototype.path = function (commands) {
1570+
this.transform();
1571+
this.context.beginPath();
1572+
this.context.strokeStyle = this.color;
1573+
this.context.lineWidth = this.lineWidth;
1574+
this.context.globalAlpha = this.alpha;
1575+
for (var i = 0, len = commands.length; i < len; i++) {
1576+
var comm = commands[i];
1577+
switch (comm[0]) {
1578+
case 'M':
1579+
this.context.moveTo(comm[1], comm[2]);
1580+
break;
1581+
case 'L':
1582+
this.context.lineTo(comm[1], comm[2]);
1583+
break;
1584+
case 'C':
1585+
this.context.bezierCurveTo(comm[1], comm[2], comm[3], comm[4], comm[5], comm[6]);
1586+
break;
1587+
case 'Q':
1588+
this.context.quadraticCurveTo(comm[1], comm[2], comm[3], comm[4]);
1589+
break;
1590+
case 'Z':
1591+
this.context.closePath();
1592+
break;
1593+
}
1594+
}
1595+
this.context.stroke();
1596+
this.restoreTransform();
1597+
};
1598+
1599+
/**
1600+
* Draw a filled path
1601+
* A path command is one of the followings:
1602+
* ['M', x, y] - moveTo
1603+
* ['L', x, y] - lineTo
1604+
* ['C', x1, y1, x2, y2, x, y] - bezierCurveTo
1605+
* ['Q', x1, y1, x, 2] - quadraticCurveTo
1606+
* ['Z'] - closePath
1607+
*
1608+
* @param {Array.<Array>}
1609+
* @param {boolean} doStroke
1610+
*/
1611+
Canvas.prototype.fillPath = function (commands, doStroke) {
1612+
this.transform();
1613+
this.context.beginPath();
1614+
this.context.strokeStyle = this.color;
1615+
this.context.fillStyle = this.fillColor;
1616+
this.context.lineWidth = this.lineWidth;
1617+
this.context.globalAlpha = this.alpha;
1618+
for (var i = 0, len = commands.length; i < len; i++) {
1619+
var comm = commands[i];
1620+
switch (comm[0]) {
1621+
case 'M':
1622+
this.context.moveTo(comm[1], comm[2]);
1623+
break;
1624+
case 'L':
1625+
this.context.lineTo(comm[1], comm[2]);
1626+
break;
1627+
case 'C':
1628+
this.context.bezierCurveTo(comm[1], comm[2], comm[3], comm[4], comm[5], comm[6]);
1629+
break;
1630+
case 'Q':
1631+
this.context.quadraticCurveTo(comm[1], comm[2], comm[3], comm[4]);
1632+
break;
1633+
case 'Z':
1634+
this.context.closePath();
1635+
break;
1636+
}
1637+
}
1638+
this.context.fill();
1639+
if (doStroke) {
1640+
this.context.stroke();
1641+
}
1642+
this.restoreTransform();
1643+
};
1644+
15581645
/**
15591646
* Word Wrap
15601647
* @param {string} text

‎flowchart/Flowchart.js‎

Lines changed: 56 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,8 @@ define(function (require, exports, module) {
4747
MERGE_MINWIDTH = 30,
4848
MERGE_MINHEIGHT = 25,
4949
EXTRACT_MINWIDTH = 30,
50-
EXTRACT_MINHEIGHT = 25;
51-
50+
EXTRACT_MINHEIGHT = 25;
51+
5252
/**
5353
* FCModelElement
5454
* @constructor
@@ -91,7 +91,7 @@ define(function (require, exports, module) {
9191
return "FlowchartDiagram";
9292
};
9393

94-
94+
9595
/**
9696
* FCProcess
9797
* @constructor
@@ -734,21 +734,12 @@ define(function (require, exports, module) {
734734
FCDocumentView.prototype.drawDocument = function (canvas, rect) {
735735
var h = Math.floor(rect.getHeight() / 6),
736736
g = Math.floor(rect.getWidth() / 3);
737-
canvas.transform();
738-
canvas.context.beginPath();
739-
canvas.context.strokeStyle = canvas.color;
740-
canvas.context.fillStyle = canvas.fillColor;
741-
canvas.context.lineWidth = canvas.lineWidth;
742-
canvas.context.globalAlpha = canvas.alpha;
743-
canvas.context.moveTo(rect.x1, rect.y1);
744-
canvas.context.lineTo(rect.x2, rect.y1);
745-
canvas.context.lineTo(rect.x2, rect.y2);
746-
canvas.context.bezierCurveTo(rect.x2 - g, rect.y2 - (h * 2), rect.x1 + g, rect.y2 + (h * 1.5), rect.x1, rect.y2 - h);
747-
canvas.context.lineTo(rect.x1, rect.y1);
748-
canvas.context.closePath();
749-
canvas.context.fill();
750-
canvas.context.stroke();
751-
canvas.restoreTransform();
737+
canvas.fillPath([['M', rect.x1, rect.y1],
738+
['L', rect.x2, rect.y1],
739+
['L', rect.x2, rect.y2],
740+
['C', rect.x2 - g, rect.y2 - (h * 2), rect.x1 + g, rect.y2 + (h * 1.5), rect.x1, rect.y2 - h],
741+
['L', rect.x1, rect.y1],
742+
['Z']], true);
752743
};
753744

754745
FCDocumentView.prototype.drawObject = function (canvas) {
@@ -853,23 +844,14 @@ define(function (require, exports, module) {
853844
var r = new Rect(this.left, this.top, this.getRight(), this.getBottom()),
854845
m = (r.y1 + r.y2) / 2,
855846
g = Math.floor(this.width / 6);
856-
canvas.transform();
857-
canvas.context.beginPath();
858-
canvas.context.strokeStyle = canvas.color;
859-
canvas.context.fillStyle = canvas.fillColor;
860-
canvas.context.lineWidth = canvas.lineWidth;
861-
canvas.context.globalAlpha = canvas.alpha;
862-
canvas.context.moveTo(r.x1, m);
863-
canvas.context.lineTo(r.x1 + g, r.y1);
864-
canvas.context.lineTo(r.x2 - g, r.y1);
865-
canvas.context.quadraticCurveTo(r.x2, r.y1, r.x2, m);
866-
canvas.context.quadraticCurveTo(r.x2, r.y2, r.x2 - g, r.y2);
867-
canvas.context.lineTo(r.x1 + g, r.y2);
868-
canvas.context.lineTo(r.x1, m);
869-
canvas.context.closePath();
870-
canvas.context.fill();
871-
canvas.context.stroke();
872-
canvas.restoreTransform();
847+
canvas.fillPath([['M', r.x1, m],
848+
['L', r.x1 + g, r.y1],
849+
['L', r.x2 - g, r.y1],
850+
['Q', r.x2, r.y1, r.x2, m],
851+
['Q', r.x2, r.y2, r.x2 - g, r.y2],
852+
['L', r.x1 + g, r.y2],
853+
['L', r.x1, m],
854+
['Z']], true);
873855
FCGeneralNodeView.prototype.drawObject.call(this, canvas);
874856
};
875857

@@ -995,22 +977,13 @@ define(function (require, exports, module) {
995977
FCPunchedTapeView.prototype.drawObject = function (canvas) {
996978
var r = new Rect(this.left, this.top, this.getRight(), this.getBottom()),
997979
h = Math.floor(r.getHeight() / 6),
998-
g = Math.floor(r.getWidth() / 3);
999-
canvas.transform();
1000-
canvas.context.beginPath();
1001-
canvas.context.strokeStyle = canvas.color;
1002-
canvas.context.fillStyle = canvas.fillColor;
1003-
canvas.context.lineWidth = canvas.lineWidth;
1004-
canvas.context.globalAlpha = canvas.alpha;
1005-
canvas.context.moveTo(r.x1, r.y1);
1006-
canvas.context.bezierCurveTo(r.x1 + g, r.y1 + (h * 2), r.x2 - g, r.y1 - (h * 1.5), r.x2, r.y1 + h);
1007-
canvas.context.lineTo(r.x2, r.y2);
1008-
canvas.context.bezierCurveTo(r.x2 - g, r.y2 - (h * 2), r.x1 + g, r.y2 + (h * 1.5), r.x1, r.y2 - h);
1009-
canvas.context.lineTo(r.x1, r.y1);
1010-
canvas.context.closePath();
1011-
canvas.context.fill();
1012-
canvas.context.stroke();
1013-
canvas.restoreTransform();
980+
g = Math.floor(r.getWidth() / 3);
981+
canvas.fillPath([['M', r.x1, r.y1],
982+
['C', r.x1 + g, r.y1 + (h * 2), r.x2 - g, r.y1 - (h * 1.5), r.x2, r.y1 + h],
983+
['L', r.x2, r.y2],
984+
['C', r.x2 - g, r.y2 - (h * 2), r.x1 + g, r.y2 + (h * 1.5), r.x1, r.y2 - h],
985+
['L', r.x1, r.y1],
986+
['Z']], true);
1014987
FCGeneralNodeView.prototype.drawObject.call(this, canvas);
1015988
};
1016989

@@ -1329,24 +1302,15 @@ define(function (require, exports, module) {
13291302
kappa = 0.5522848,
13301303
ox = g * kappa, // control point offset horizontal
13311304
oy = (h / 2) * kappa; // control point offset vertical
1332-
1333-
canvas.transform();
1334-
canvas.context.beginPath();
1335-
canvas.context.strokeStyle = canvas.color;
1336-
canvas.context.fillStyle = canvas.fillColor;
1337-
canvas.context.lineWidth = canvas.lineWidth;
1338-
canvas.context.globalAlpha = canvas.alpha;
1339-
canvas.context.moveTo(r.x2, r.y1);
1340-
canvas.context.bezierCurveTo(r.x2 - ox, r.y1, r.x2 - g, ym - oy, r.x2 - g, ym);
1341-
canvas.context.bezierCurveTo(r.x2 - g, ym + oy, r.x2 - ox, r.y2, r.x2, r.y2);
1342-
canvas.context.lineTo(r.x1 + g, r.y2);
1343-
canvas.context.bezierCurveTo(r.x1 + g - ox, r.y2, r.x1, ym + oy, r.x1, ym);
1344-
canvas.context.bezierCurveTo(r.x1, ym - oy, r.x1 + g - ox, r.y1, r.x1 + g, r.y1);
1345-
canvas.context.lineTo(r.x2, r.y1);
1346-
canvas.context.closePath();
1347-
canvas.context.fill();
1348-
canvas.context.stroke();
1349-
canvas.restoreTransform();
1305+
1306+
canvas.fillPath([['M', r.x2, r.y1],
1307+
['C', r.x2 - ox, r.y1, r.x2 - g, ym - oy, r.x2 - g, ym],
1308+
['C', r.x2 - g, ym + oy, r.x2 - ox, r.y2, r.x2, r.y2],
1309+
['L', r.x1 + g, r.y2],
1310+
['C', r.x1 + g - ox, r.y2, r.x1, ym + oy, r.x1, ym],
1311+
['C', r.x1, ym - oy, r.x1 + g - ox, r.y1, r.x1 + g, r.y1],
1312+
['L', r.x2, r.y1],
1313+
['Z']], true);
13501314
FCGeneralNodeView.prototype.drawObject.call(this, canvas);
13511315
};
13521316

@@ -1379,29 +1343,18 @@ define(function (require, exports, module) {
13791343
kappa = 0.5522848,
13801344
ox = (w / 2) * kappa, // control point offset horizontal
13811345
oy = g * kappa; // control point offset vertical
1382-
1383-
canvas.transform();
1384-
canvas.context.beginPath();
1385-
canvas.context.strokeStyle = canvas.color;
1386-
canvas.context.fillStyle = canvas.fillColor;
1387-
canvas.context.lineWidth = canvas.lineWidth;
1388-
canvas.context.globalAlpha = canvas.alpha;
1389-
canvas.context.moveTo(r.x1, r.y1 + g);
1390-
canvas.context.bezierCurveTo(r.x1, r.y1 + g - oy, xm - ox, r.y1, xm, r.y1);
1391-
canvas.context.bezierCurveTo(xm + ox, r.y1, r.x2, r.y1 + g - oy, r.x2, r.y1 + g);
1392-
canvas.context.lineTo(r.x2, r.y2 - g);
1393-
canvas.context.bezierCurveTo(r.x2, r.y2 - g + oy, xm + ox, r.y2, xm, r.y2);
1394-
canvas.context.bezierCurveTo(xm - ox, r.y2, r.x1, r.y2 - g + oy, r.x1, r.y2 - g);
1395-
canvas.context.lineTo(r.x1, r.y1 + g);
1396-
canvas.context.closePath();
1397-
canvas.context.fill();
1398-
canvas.context.stroke();
1399-
canvas.context.beginPath();
1400-
canvas.context.moveTo(r.x1, r.y1 + g);
1401-
canvas.context.bezierCurveTo(r.x1, r.y1 + g + oy, xm - ox, r.y1 + (g * 2), xm, r.y1 + (g * 2));
1402-
canvas.context.bezierCurveTo(xm + ox, r.y1 + (g * 2), r.x2, r.y1 + g + oy, r.x2, r.y1 + g);
1403-
canvas.context.stroke();
1404-
canvas.restoreTransform();
1346+
1347+
canvas.fillPath([['M', r.x1, r.y1 + g],
1348+
['C', r.x1, r.y1 + g - oy, xm - ox, r.y1, xm, r.y1],
1349+
['C', xm + ox, r.y1, r.x2, r.y1 + g - oy, r.x2, r.y1 + g],
1350+
['L', r.x2, r.y2 - g],
1351+
['C', r.x2, r.y2 - g + oy, xm + ox, r.y2, xm, r.y2],
1352+
['C', xm - ox, r.y2, r.x1, r.y2 - g + oy, r.x1, r.y2 - g],
1353+
['L', r.x1, r.y1 + g],
1354+
['Z']], true);
1355+
canvas.path([['M', r.x1, r.y1 + g],
1356+
['C', r.x1, r.y1 + g + oy, xm - ox, r.y1 + (g * 2), xm, r.y1 + (g * 2)],
1357+
['C', xm + ox, r.y1 + (g * 2), r.x2, r.y1 + g + oy, r.x2, r.y1 + g]]);
14051358
FCGeneralNodeView.prototype.drawObject.call(this, canvas);
14061359
};
14071360

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

1438-
canvas.transform();
1439-
canvas.context.beginPath();
1440-
canvas.context.strokeStyle = canvas.color;
1441-
canvas.context.fillStyle = canvas.fillColor;
1442-
canvas.context.lineWidth = canvas.lineWidth;
1443-
canvas.context.globalAlpha = canvas.alpha;
1444-
canvas.context.moveTo(r.x2 - g, r.y1);
1445-
canvas.context.bezierCurveTo(r.x2 - g + ox, r.y1, r.x2, ym - oy, r.x2, ym);
1446-
canvas.context.bezierCurveTo(r.x2, ym + oy, r.x2 - g + ox, r.y2, r.x2 - g, r.y2);
1447-
canvas.context.lineTo(r.x1 + g, r.y2);
1448-
canvas.context.bezierCurveTo(r.x1 + g - ox, r.y2, r.x1, ym + oy, r.x1, ym);
1449-
canvas.context.bezierCurveTo(r.x1, ym - oy, r.x1 + g - ox, r.y1, r.x1 + g, r.y1);
1450-
canvas.context.lineTo(r.x2 - g, r.y1);
1451-
canvas.context.closePath();
1452-
canvas.context.fill();
1453-
canvas.context.stroke();
1454-
canvas.context.beginPath();
1455-
canvas.context.moveTo(r.x2 - g, r.y1);
1456-
canvas.context.bezierCurveTo(r.x2 - g - ox, r.y1, r.x2 - (g * 2), ym - oy, r.x2 - (g * 2), ym);
1457-
canvas.context.bezierCurveTo(r.x2 - (g * 2), ym + oy, r.x2 - g - ox, r.y2, r.x2 - g, r.y2);
1458-
canvas.context.stroke();
1459-
canvas.restoreTransform();
1391+
canvas.fillPath([['M', r.x2 - g, r.y1],
1392+
['C', r.x2 - g + ox, r.y1, r.x2, ym - oy, r.x2, ym],
1393+
['C', r.x2, ym + oy, r.x2 - g + ox, r.y2, r.x2 - g, r.y2],
1394+
['L', r.x1 + g, r.y2],
1395+
['C', r.x1 + g - ox, r.y2, r.x1, ym + oy, r.x1, ym],
1396+
['C', r.x1, ym - oy, r.x1 + g - ox, r.y1, r.x1 + g, r.y1],
1397+
['L', r.x2 - g, r.y1],
1398+
['Z']], true);
1399+
canvas.path([['M', r.x2 - g, r.y1],
1400+
['C', r.x2 - g - ox, r.y1, r.x2 - (g * 2), ym - oy, r.x2 - (g * 2), ym],
1401+
['C', r.x2 - (g * 2), ym + oy, r.x2 - g - ox, r.y2, r.x2 - g, r.y2]]);
14601402
FCGeneralNodeView.prototype.drawObject.call(this, canvas);
14611403
};
14621404

0 commit comments

Comments
 (0)