2014-05-05 14:48:30 -04:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
2014-08-16 13:24:54 -04:00
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<title>Transform Testing</title>
|
|
|
|
|
<link rel="stylesheet" href="../css/style.css">
|
|
|
|
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
|
|
|
|
<script type="text/paperscript" canvas="canvas">
|
|
|
|
|
// Import Inkscape-style SVG, preserving pivots
|
|
|
|
|
var svg = project.importSVG(document.getElementById('svg'), {
|
|
|
|
|
onImport: function(node, item) {
|
|
|
|
|
var prefix = 'inkscape:transform-center-';
|
|
|
|
|
var x = node.getAttribute(prefix + 'x');
|
|
|
|
|
var y = node.getAttribute(prefix + 'y');
|
|
|
|
|
if (x != null && y != null) {
|
|
|
|
|
item.pivot = new Point(+x, +y);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
2014-05-05 14:48:30 -04:00
|
|
|
|
2014-08-16 13:24:54 -04:00
|
|
|
// Illustrate pivot using a simple animation
|
|
|
|
|
var rect = svg.children.rectangle;
|
|
|
|
|
// Show the pivot
|
|
|
|
|
new Path.Circle({
|
|
|
|
|
center: rect.localToGlobal(rect.pivot),
|
|
|
|
|
radius: 4,
|
|
|
|
|
strokeColor: 'black'
|
|
|
|
|
});
|
2014-05-05 14:48:30 -04:00
|
|
|
|
2014-08-16 13:24:54 -04:00
|
|
|
rect.onFrame = function() {
|
|
|
|
|
rect.rotate(1);
|
|
|
|
|
}
|
2014-05-05 14:48:30 -04:00
|
|
|
|
2014-08-16 13:24:54 -04:00
|
|
|
// And export again, preserving Inkscape pivots
|
|
|
|
|
console.log(rect.exportSVG({
|
|
|
|
|
onExport: function(item, node) {
|
|
|
|
|
var prefix = 'inkscape:transform-center-';
|
|
|
|
|
if (item.pivot) {
|
|
|
|
|
node.setAttribute(prefix + 'x', item.pivot.x);
|
|
|
|
|
node.setAttribute(prefix + 'y', item.pivot.y);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}))
|
|
|
|
|
</script>
|
2014-05-05 14:48:30 -04:00
|
|
|
</head>
|
|
|
|
|
<body>
|
2014-08-16 13:24:54 -04:00
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500" id="svg">
|
|
|
|
|
<rect id="rectangle" x="50" y="200" width="200" height="100" fill="red" inkscape:transform-center-x="100" inkscape:transform-center-y="0" />
|
|
|
|
|
</svg>
|
|
|
|
|
<canvas id="canvas" width="500" height="500"></canvas>
|
2014-05-05 14:48:30 -04:00
|
|
|
</body>
|
|
|
|
|
</html>
|
