RE: [svg-developers] normalizedPathSegList
A cool thing, Yannick. Thanks for sharing. I had never seen jsfiddle before
either. That’s fun too!
Cheers
David
From: svg-developers@yahoogroups.com [mailto:svg-developers@yahoogroups.com] On
Behalf Of yannick.bocha...@free.fr
Sent: Wednesday, October 19, 2011 5:59 AM
To: svg-developers@yahoogroups.com
Subject: Re: [svg-developers] normalizedPathSegList
Hi,
I wrote a partial javascript workaround for the unimplemented
normalizedPathSegList property :
http://jsfiddle.net/ybochatay/AtTND/3/ or https://gist.github.com/1297684
It's not the normalizedPathSegList property as described by the W3C but a
function to convert paths with only M,L,C and Z segments.
You can set the degree of Bezier Curves to approximate arcs (1 will produce L
segments, 2 Q, 3 C), and the defaultFlatness.
Regards,
Yannick Bochatay
http://ybochatay.fr
- Mail original -
De: yannick bochatay yannick.bocha...@free.fr
mailto:yannick.bochatay%40free.fr
À: svg-developers@yahoogroups.com mailto:svg-developers%40yahoogroups.com
Envoyé: Mercredi 12 Octobre 2011 15:00:53
Objet: [svg-developers] normalizedPathSegList
Hi,
I try to write a function to update points of a path from a transformation
matrix. It's all ok except for elliptical arcs :
I can't find the correct coefficients for r1 r2 and angle.
Is it simplier to approximate arcs with bezier curves, like the
normalizedPathSegList property would do (but not implemented yet) ?
I wrote an example at http://jsfiddle.net/s32LX/, but I've put the code below
anyway.
Best regards,
Yannick Bochatay
http://ybochatay.fr
SVGPathElement.prototype.mtx2attrs = function(mtx) {
var seg,letter,point,pt={},
angle = Math.atan2(mtx.b, mtx.a),
svg = this.ownerSVGElement,
list = this.pathSegList,
i=0, N = list.numberOfItems;
/* this.rel2abs(); function that change relative paths to absolute */
for (;iN;i++) {
seg = list.getItem(i);
letter = seg.pathSegTypeAsLetter;
['','1','2'].forEach(function(ind) {
if (seg['x'+ind] === undefined seg['y'+ind] === undefined) { return; }
if (seg['x'+ind] !== undefined) { pt['x'+ind] = seg['x'+ind]; }
if (seg['y'+ind] !== undefined) { pt['y'+ind] = seg['y'+ind]; }
var point = svg.createSVGPoint();
point.x = pt['x'+ind]; point.y = pt['y'+ind];
point = point.matrixTransform(mtx);
seg['x'+ind] = point.x;
seg['y'+ind] = point.y;
});
if (angle!==0 (letter === 'H' || letter === 'V')) {
this.pathSegList.replaceItem( this.createSVGPathSegLinetoAbs(seg.x,seg.y) , i
);
}
else if (letter === 'A') {
/*what to do in that case ??
seg.r1 = ?
seg.r2 = ?
seg.angle+= angle ?
*/
}
}
};
[Non-text portions of this message have been removed]
-
To unsubscribe send a message to: svg-developers-unsubscr...@yahoogroups.com
-or-
visit http://groups.yahoo.com/group/svg-developers and click edit my
membership
Yahoo! Groups Links
* To visit your group on the web, go to:
http://groups.yahoo.com/group/svg-developers/
* Your email settings:
Individual Email | Traditional
* To change settings online go to:
http://groups.yahoo.com/group/svg-developers/join
(Yahoo! ID required)
* To change settings via email:
svg-developers-dig...@yahoogroups.com
svg-developers-fullfeatu...@yahoogroups.com
* To unsubscribe from this group, send an email to:
svg-developers-unsubscr...@yahoogroups.com
* Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/
Re: [svg-developers] normalizedPathSegList
Another really useful site is a viewer for code posted to gist.github.comwhich is http://bl.ocks.org For example, you can view my fun SVG example from gist - https://gist.github.com/1216850 displayed automatically here - http://bl.ocks.org/1216850 (Note, this runs a little slow in ffox.) This is more nice work from the inventor / coder Mike Bostock. I had started doing something like this for the community on svgelves.com 10 years ago, but I didn't quite make it easy enough to upload and display the SVGs. Github is a great code-sharing site and bl.ocks.org just takes advantage of that really well. Enjoy. [Non-text portions of this message have been removed] - To unsubscribe send a message to: svg-developers-unsubscr...@yahoogroups.com -or- visit http://groups.yahoo.com/group/svg-developers and click edit my membership Yahoo! Groups Links * To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ * Your email settings: Individual Email | Traditional * To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) * To change settings via email: svg-developers-dig...@yahoogroups.com svg-developers-fullfeatu...@yahoogroups.com * To unsubscribe from this group, send an email to: svg-developers-unsubscr...@yahoogroups.com * Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
Re: [svg-developers] normalizedPathSegList
Hi,
I wrote a partial javascript workaround for the unimplemented
normalizedPathSegList property :
http://jsfiddle.net/ybochatay/AtTND/3/ or https://gist.github.com/1297684
It's not the normalizedPathSegList property as described by the W3C but a
function to convert paths with only M,L,C and Z segments.
You can set the degree of Bezier Curves to approximate arcs (1 will produce L
segments, 2 Q, 3 C), and the defaultFlatness.
Regards,
Yannick Bochatay
http://ybochatay.fr
- Mail original -
De: yannick bochatay yannick.bocha...@free.fr
À: svg-developers@yahoogroups.com
Envoyé: Mercredi 12 Octobre 2011 15:00:53
Objet: [svg-developers] normalizedPathSegList
Hi,
I try to write a function to update points of a path from a transformation
matrix. It's all ok except for elliptical arcs :
I can't find the correct coefficients for r1 r2 and angle.
Is it simplier to approximate arcs with bezier curves, like the
normalizedPathSegList property would do (but not implemented yet) ?
I wrote an example at http://jsfiddle.net/s32LX/, but I've put the code below
anyway.
Best regards,
Yannick Bochatay
http://ybochatay.fr
SVGPathElement.prototype.mtx2attrs = function(mtx) {
var seg,letter,point,pt={},
angle = Math.atan2(mtx.b, mtx.a),
svg = this.ownerSVGElement,
list = this.pathSegList,
i=0, N = list.numberOfItems;
/* this.rel2abs(); function that change relative paths to absolute */
for (;iN;i++) {
seg = list.getItem(i);
letter = seg.pathSegTypeAsLetter;
['','1','2'].forEach(function(ind) {
if (seg['x'+ind] === undefined seg['y'+ind] === undefined) { return; }
if (seg['x'+ind] !== undefined) { pt['x'+ind] = seg['x'+ind]; }
if (seg['y'+ind] !== undefined) { pt['y'+ind] = seg['y'+ind]; }
var point = svg.createSVGPoint();
point.x = pt['x'+ind]; point.y = pt['y'+ind];
point = point.matrixTransform(mtx);
seg['x'+ind] = point.x;
seg['y'+ind] = point.y;
});
if (angle!==0 (letter === 'H' || letter === 'V')) {
this.pathSegList.replaceItem( this.createSVGPathSegLinetoAbs(seg.x,seg.y) , i
);
}
else if (letter === 'A') {
/*what to do in that case ??
seg.r1 = ?
seg.r2 = ?
seg.angle+= angle ?
*/
}
}
};
-
To unsubscribe send a message to: svg-developers-unsubscr...@yahoogroups.com
-or-
visit http://groups.yahoo.com/group/svg-developers and click edit my
membership
Yahoo! Groups Links
* To visit your group on the web, go to:
http://groups.yahoo.com/group/svg-developers/
* Your email settings:
Individual Email | Traditional
* To change settings online go to:
http://groups.yahoo.com/group/svg-developers/join
(Yahoo! ID required)
* To change settings via email:
svg-developers-dig...@yahoogroups.com
svg-developers-fullfeatu...@yahoogroups.com
* To unsubscribe from this group, send an email to:
svg-developers-unsubscr...@yahoogroups.com
* Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/
[svg-developers] normalizedPathSegList
Hi,
I try to write a function to update points of a path from a transformation
matrix. It's all ok except for elliptical arcs :
I can't find the correct coefficients for r1 r2 and angle.
Is it simplier to approximate arcs with bezier curves, like the
normalizedPathSegList property would do (but not implemented yet) ?
I wrote an example at http://jsfiddle.net/s32LX/, but I've put the code below
anyway.
Best regards,
Yannick Bochatay
http://ybochatay.fr
SVGPathElement.prototype.mtx2attrs = function(mtx) {
var seg,letter,point,pt={},
angle = Math.atan2(mtx.b, mtx.a),
svg = this.ownerSVGElement,
list = this.pathSegList,
i=0, N = list.numberOfItems;
/* this.rel2abs(); function that change relative paths to absolute */
for (;iN;i++) {
seg = list.getItem(i);
letter = seg.pathSegTypeAsLetter;
['','1','2'].forEach(function(ind) {
if (seg['x'+ind] === undefined seg['y'+ind] === undefined) {
return; }
if (seg['x'+ind] !== undefined) { pt['x'+ind] = seg['x'+ind]; }
if (seg['y'+ind] !== undefined) { pt['y'+ind] = seg['y'+ind]; }
var point = svg.createSVGPoint();
point.x = pt['x'+ind]; point.y = pt['y'+ind];
point = point.matrixTransform(mtx);
seg['x'+ind] = point.x;
seg['y'+ind] = point.y;
});
if (angle!==0 (letter === 'H' || letter === 'V')) {
this.pathSegList.replaceItem(
this.createSVGPathSegLinetoAbs(seg.x,seg.y) , i );
}
else if (letter === 'A') {
/*what to do in that case ??
seg.r1 = ?
seg.r2 = ?
seg.angle+= angle ?
*/
}
}
};
-
To unsubscribe send a message to: svg-developers-unsubscr...@yahoogroups.com
-or-
visit http://groups.yahoo.com/group/svg-developers and click edit my
membership
Yahoo! Groups Links
* To visit your group on the web, go to:
http://groups.yahoo.com/group/svg-developers/
* Your email settings:
Individual Email | Traditional
* To change settings online go to:
http://groups.yahoo.com/group/svg-developers/join
(Yahoo! ID required)
* To change settings via email:
svg-developers-dig...@yahoogroups.com
svg-developers-fullfeatu...@yahoogroups.com
* To unsubscribe from this group, send an email to:
svg-developers-unsubscr...@yahoogroups.com
* Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/
