diff --git a/demos/centered/center.js b/demos/centered/center.js
new file mode 100644
index 0000000..dfaacfd
--- /dev/null
+++ b/demos/centered/center.js
@@ -0,0 +1,166 @@
+// ----- setup ----- //
+var isSpinning = true;
+
+var model = new Zdog.Anchor();
+
+// Made with Zdog
+
+const orange = '#E62';
+const garnet = '#C25';
+const eggplant = '#636';
+
+// origin dot
+var dot = new Zdog.Shape({
+ addTo: model,
+ stroke: 8,
+ color: eggplant,
+});
+
+var zCircle = new Zdog.Ellipse({
+ addTo: model,
+ diameter: 20,
+ quarters: 2,
+ closed: true,
+ translate: { z: 40 },
+ scale: 1,
+ stroke: 8,
+ fill: true,
+ color: eggplant,
+});
+
+// z line
+new Zdog.Shape({
+ addTo: zCircle,
+ path: [ {}, zCircle.translate.copy().multiply({ z: -1 }) ],
+ scale: 1/zCircle.scale.z,
+ stroke: 2,
+ color: zCircle.color,
+});
+
+var xRect = new Zdog.Rect({
+ addTo: zCircle,
+ width: 20,
+ height: 20,
+ translate: { x: 40 },
+ stroke: 8,
+ fill: true,
+ color: garnet,
+});
+
+// x line
+new Zdog.Shape({
+ addTo: xRect,
+ path: [ {}, xRect.translate.copy().multiply({ x: -1 }) ],
+ stroke: 2,
+ color: xRect.color,
+});
+
+var yTri = new Zdog.Polygon({
+ addTo: xRect,
+ radius: 10,
+ sides: 3,
+ translate: { y: -60 },
+ stroke: 8,
+ fill: true,
+ color: orange,
+});
+
+// y line
+new Zdog.Shape({
+ addTo: yTri,
+ path: [ {}, yTri.translate.copy().multiply({ y: -1 }) ],
+ stroke: 2,
+ color: yTri.color,
+});
+
+var canvasDot = new Zdog.Illustration({
+ element: 'canvas.dot',
+ dragRotate: model,
+ //centered: dot,
+ onDragStart: function() {
+ isSpinning = false;
+ },
+});
+
+var canvasEggplant = new Zdog.Illustration({
+ element: 'canvas.eggplant',
+ dragRotate: model,
+ centered: zCircle,
+ onDragStart: function() {
+ isSpinning = false;
+ },
+});
+var canvasGarnet = new Zdog.Illustration({
+ element: 'canvas.garnet',
+ dragRotate: model,
+ centered: xRect,
+ onDragStart: function() {
+ isSpinning = false;
+ },
+});
+var canvasOrange = new Zdog.Illustration({
+ element: 'canvas.orange',
+ dragRotate: model,
+ centered: yTri,
+ onDragStart: function() {
+ isSpinning = false;
+ },
+});
+
+var svgDot = new Zdog.Illustration({
+ element: 'svg.dot',
+ dragRotate: model,
+ isolated: true,
+ //centered: dot,
+ onDragStart: function() {
+ isSpinning = false;
+ },
+});
+var svgEggplant = new Zdog.Illustration({
+ element: 'svg.eggplant',
+ dragRotate: model,
+ isolated: true,
+ centered: zCircle,
+ onDragStart: function() {
+ isSpinning = false;
+ },
+});
+var svgGarnet = new Zdog.Illustration({
+ element: 'svg.garnet',
+ dragRotate: model,
+ isolated: true,
+ centered: xRect,
+ onDragStart: function() {
+ isSpinning = false;
+ },
+});
+var svgOrange = new Zdog.Illustration({
+ element: 'svg.orange',
+ dragRotate: model,
+ centered: yTri,
+ onDragStart: function() {
+ isSpinning = false;
+ },
+});
+
+// ----- animate ----- //
+
+function animate() {
+ model.rotate.y += isSpinning ? 0.03 : 0;
+ model.updateGraph();
+
+ canvasDot.renderGraph( model );
+ canvasEggplant.renderGraph( model );
+ canvasGarnet.renderGraph( model );
+ canvasOrange.renderGraph( model );
+
+ svgDot.renderGraph( model );
+ svgEggplant.renderGraph( model );
+ svgGarnet.renderGraph( model );
+ svgOrange.renderGraph( model );
+
+ requestAnimationFrame( animate );
+}
+
+animate();
+
diff --git a/demos/centered/index.html b/demos/centered/index.html
new file mode 100644
index 0000000..66bee4d
--- /dev/null
+++ b/demos/centered/index.html
@@ -0,0 +1,60 @@
+
+
+
+
+
+
+ centered
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/js/illustration.js b/js/illustration.js
index 46a961e..21c3826 100644
--- a/js/illustration.js
+++ b/js/illustration.js
@@ -21,6 +21,7 @@ var TAU = utils.TAU;
var Illustration = Anchor.subclass({
element: undefined,
centered: true,
+ isolated: false,
zoom: 1,
dragRotate: false,
resize: false,
@@ -157,9 +158,13 @@ Illustration.prototype.prerenderCanvas = function() {
ctx.clearRect( 0, 0, this.canvasWidth, this.canvasHeight );
ctx.save();
if ( this.centered ) {
- var centerX = this.width / 2 * this.pixelRatio;
- var centerY = this.height / 2 * this.pixelRatio;
- ctx.translate( centerX, centerY );
+ var centerX = this.width / 2;
+ var centerY = this.height / 2;
+ if (this.centered.origin) {
+ centerX -= this.centered.renderOrigin.x;
+ centerY -= this.centered.renderOrigin.y;
+ }
+ ctx.translate( centerX * this.pixelRatio, centerY * this.pixelRatio);
}
var scale = this.pixelRatio * this.zoom;
ctx.scale( scale, scale );
@@ -172,6 +177,25 @@ Illustration.prototype.postrenderCanvas = function() {
// ----- svg ----- //
+Illustration.prototype.prerenderSvg = function() {
+ var viewWidth = this.width / this.zoom;
+ var viewHeight = this.height / this.zoom;
+ var viewX = this.centered ? -viewWidth/2 : 0;
+ var viewY = this.centered ? -viewHeight/2 : 0;
+ if (this.centered.origin) {
+ viewX += this.centered.renderOrigin.x;
+ viewY += this.centered.renderOrigin.y;
+ }
+ this.element.setAttribute( 'viewBox', viewX + ' ' + viewY + ' ' +
+ viewWidth + ' ' + viewHeight );
+}
+
+Illustration.prototype.postrenderSvg = function() {
+ if (this.isolated){
+ this.element.innerHTML = this.element.innerHTML;
+ }
+}
+
Illustration.prototype.setSvg = function( element ) {
this.element = element;
this.isSvg = true;
@@ -185,12 +209,7 @@ Illustration.prototype.setSvg = function( element ) {
Illustration.prototype.setSizeSvg = function( width, height ) {
this.width = width;
this.height = height;
- var viewWidth = width / this.zoom;
- var viewHeight = height / this.zoom;
- var viewX = this.centered ? -viewWidth/2 : 0;
- var viewY = this.centered ? -viewHeight/2 : 0;
- this.element.setAttribute( 'viewBox', viewX + ' ' + viewY + ' ' +
- viewWidth + ' ' + viewHeight );
+ this.prerenderSvg();
if ( this.resize ) {
// remove size attributes, let size be determined by viewbox
this.element.removeAttribute('width');
@@ -204,8 +223,10 @@ Illustration.prototype.setSizeSvg = function( width, height ) {
Illustration.prototype.renderGraphSvg = function( item ) {
item = item || this;
empty( this.element );
+ this.prerenderSvg();
this.onPrerender( this.element );
Anchor.prototype.renderGraphSvg.call( item, this.element );
+ this.postrenderSvg();
};
function empty( element ) {