Hopiu/fabric.js
1
0
Fork 0
mirror of https://github.com/Hopiu/fabric.js.git synced 2026-05-05 04:14:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Closes #34 — Support multiple sequences of command arguments in SVG paths.

Browse source
This commit is contained in:
kangax 2011-07-09 15:50:44 -04:00
parent 15aef846e3
commit c046bbd5f1
4 changed files with 69 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
dist/all.js vendored
View file

@ -1,6 +1,6 @@
/*! Fabric.js Copyright 2008-2011, Bitsonnet (Juriy Zaytsev, Maxim Chernyak) */
var fabric = fabric || { version: "0.4.1" };
var fabric = fabric || { version: "0.4.2" };
/**
* Wrapper around `console.log` (when available)
@ -8424,6 +8424,18 @@ fabric.util.object.extend(fabric.Canvas.prototype, {
(function(global) {
var commandLengths = {
m: 2,
l: 2,
h: 1,
v: 1,
c: 6,
s: 4,
q: 4,
t: 2,
a: 7
};
function drawArc(ctx, x, y, coords) {
var rx = coords[0];
var ry = coords[1];
@ -8948,13 +8960,25 @@ fabric.util.object.extend(fabric.Canvas.prototype, {
currentPath = this.path[i];
chunks = currentPath.slice(1).trim().replace(/(\d)-/g, '$1###-').split(/\s|,|###/);
chunksParsed = [ currentPath.charAt(0) ];
for (var j = 0, jlen = chunks.length; j < jlen; j++) {
parsed = parseFloat(chunks[j]);
if (!isNaN(parsed)) {
chunksParsed.push(parsed);
}
}
result.push(chunksParsed);
var command = chunksParsed[0].toLowerCase(),
commandLength = commandLengths[command];
if (chunksParsed.length - 1 > commandLength) {
for (var k = 1, klen = chunksParsed.length; k < klen; k += commandLength) {
result.push([command].concat(chunksParsed.slice(k, k + commandLength)));
}
}
else {
result.push(chunksParsed);
}
}
return result;

2
fabric.js
View file

@ -1,6 +1,6 @@
/*! Fabric.js Copyright 2008-2011, Bitsonnet (Juriy Zaytsev, Maxim Chernyak) */
var fabric = fabric || { version: "0.4.1" };
var fabric = fabric || { version: "0.4.2" };
/**
* Wrapper around `console.log` (when available)

30
src/path.class.js
View file

@ -2,6 +2,18 @@
(function(global) {
var commandLengths = {
m: 2,
l: 2,
h: 1,
v: 1,
c: 6,
s: 4,
q: 4,
t: 2,
a: 7
};
function drawArc(ctx, x, y, coords) {
var rx = coords[0];
var ry = coords[1];
@ -530,20 +542,30 @@
currentPath,
chunks,
parsed;
// use plain loop for performance reasons.
// this chunk of code can be called thousands of times per second (when parsing large shapes)
for (var i = 0, j, chunksParsed, len = this.path.length; i < len; i++) {
currentPath = this.path[i];
chunks = currentPath.slice(1).trim().replace(/(\d)-/g, '$1###-').split(/\s|,|###/);
chunksParsed = [ currentPath.charAt(0) ];
for (var j = 0, jlen = chunks.length; j < jlen; j++) {
parsed = parseFloat(chunks[j]);
if (!isNaN(parsed)) {
chunksParsed.push(parsed);
}
}
result.push(chunksParsed);
var command = chunksParsed[0].toLowerCase(),
commandLength = commandLengths[command];
if (chunksParsed.length - 1 > commandLength) {
for (var k = 1, klen = chunksParsed.length; k < klen; k += commandLength) {
result.push([command].concat(chunksParsed.slice(k, k + commandLength)));
}
}
else {
result.push(chunksParsed);
}
}
return result;

16
test/unit/path.js
View file

@ -126,4 +126,20 @@
path.get('transformMatrix')
);
});
test('multiple sequences in path commands', function() {
var el = getPathElement('M100 100 l 200 200 300 300 400 -50 z');
var obj = fabric.Path.fromElement(el);
same(['M', 100, 100], obj.path[0]);
same(['l', 200, 200], obj.path[1]);
same(['l', 300, 300], obj.path[2]);
same(['l', 400, -50], obj.path[3]);
el = getPathElement('c 0,-53.25604 43.17254,-96.42858 96.42857,-96.42857 53.25603,0 96.42857,43.17254 96.42857,96.42857');
obj = fabric.Path.fromElement(el);
same(['c', 0, -53.25604, 43.17254, -96.42858, 96.42857, -96.42857], obj.path[0]);
same(['c', 53.25603, 0, 96.42857, 43.17254, 96.42857, 96.42857], obj.path[1]);
});
})();