diff options
| -rw-r--r-- | dirty.html | 80 | ||||
| -rw-r--r-- | src/helpers.js | 35 | ||||
| -rw-r--r-- | src/matrix.js | 3 |
3 files changed, 86 insertions, 32 deletions
@@ -10,10 +10,17 @@ <script type="text/javascript" src="src/runner.js"></script> <script type="text/javascript" src="src/timeline.js"></script> <script type="text/javascript" src="src/controller.js"></script> + + + + <script type="text/javascript" src="src/transform.js"></script> + <script type="text/javascript" src="src/matrix.js"></script> + + </head> <body style="background-color: #c7c7ff"> -<div id="absolute"><label>Absolute: <input type="range" min="0" max="1" step="0.01"></slider></label><span></span></div> +<div id="absolute"><label>Absolute: <input type="range" min="0" max="90" step="0.01"></slider></label><span></span></div> <div id="position"><label>Position: <input type="range" min="0" max="5" step="0.01"></slider></label><span></span></div> <!-- Making the svg --> @@ -198,39 +205,58 @@ rectangle.animate().transform({ let canvas = SVG('#canvas') -// // Make the green rectange -// canvas.rect(200, 400).move(500, 400) -// .attr('opacity', 0.3) -// .addClass('green') - -// Make the pink rectangle -let a = canvas.rect(200, 400).move(500, 400) - .attr('opacity', 0.3) - .addClass('pink') - .transform({ px: 100, py: 500, origin: 'top-left' }) - -var timer = 0 -a.timeline().source(() => { - timer += 1 - document.querySelector('#absolute span').textContent = timer - return timer +SVG('#absolute').on('input slide', function (e) { + var val = e.target.value + canvas.clear() + canvas.ellipse(20, 20) + let re = canvas.rect(300, 150).move(100, 150).attr('opacity', 0.5) + re.clone() + .transform({rotate: 45, skew: 30}, true) + + re.clone() + .transform({rotate: 45, skew: 30}, true) + .transform({rotate: val}, true) }) -let obj = { rotate: 180, shear:2, origin: [600, 600], translate: [200, 100] } -let obj2 = { rotate: 180, shear:2, origin: [600, 600], translate: [200, 100] } -a.clone() // startPosition -a.clone().transform(obj, true).transform(obj2, true) // endPosition -//a.animate(new SVG.Spring(50, 30)).transform(obj) // animation -a.animate(300).transform(obj, true).transform(obj2, true) // animation +// transform({}) -// Put an ellipse where we expect the object to be -canvas.ellipse(30, 30).center(100, 500) - .attr('opacity', 0.3) - .addClass('dark-pink') +// // Make the green rectange +// canvas.rect(200, 400).move(500, 400) +// .attr('opacity', 0.3) +// .addClass('green') + +// Make the pink rectangle +// let a = canvas.rect(200, 400).move(500, 400) +// .attr('opacity', 0.3) +// .addClass('pink') +// .transform({ px: 100, py: 500, origin: 'top-left' }) +// +// +// var timer = 0 +// a.timeline().source(() => { +// timer += 1 +// document.querySelector('#absolute span').textContent = timer +// return timer +// }) +// +// +// let obj = { rotate: 180, shear:2, origin: [600, 600], translate: [200, 100] } +// let obj2 = { rotate: 180, shear:2, origin: [600, 600], translate: [200, 100] } +// +// a.clone() // startPosition +// a.clone().transform(obj, true).transform(obj2, true) // endPosition +// //a.animate(new SVG.Spring(50, 30)).transform(obj) // animation +// a.animate(300).transform(obj, true).transform(obj2, true) // animation +// +// +// // Put an ellipse where we expect the object to be +// canvas.ellipse(30, 30).center(100, 500) +// .attr('opacity', 0.3) +// .addClass('dark-pink') // var timeline = new SVG.Timeline().pause() diff --git a/src/helpers.js b/src/helpers.js index 99a7c0b..755beba 100644 --- a/src/helpers.js +++ b/src/helpers.js @@ -260,23 +260,52 @@ function formatTransforms (o) { } } +/* TODO: KILL + + + 1. Transform the origin by figuring out the delta + + - At the start, we had: + + let Sinv = new SVG.Matrix(element).inverse() + let origin = getOrigin(element) + + - At a particular frame we have: + + let C = Matrix(element) + let newOrigin = origin.transform(S.inv).transform(C) + +*/ + + function getOrigin (o, element) { // Allow origin or around as the names let origin = o.around == null ? o.origin : o.around // Allow the user to pass a string to rotate around a given point if (typeof origin === 'string' || origin == null) { + // Get the bounding box of the element with no transformations applied const string = (origin || 'center').toLowerCase().trim() const { height, width, x, y } = element.bbox() - // Set the bounds eg : "bottom-left", "Top right", "middle" etc... - const ox = o.ox || string.includes('left') ? x + // Calculate the transformed x and y coordinates + const bx = string.includes('left') ? x : string.includes('right') ? x + width : x + width / 2 - const oy = o.oy || string.includes('top') ? y + const by = string.includes('top') ? y : string.includes('bottom') ? y + height : y + height / 2 + + // Find the new center in the transformed coordinates + const matrix = new SVG.Matrix(element) + const {x: tx , y: ty} = new SVG.Point(bx, by).transform(matrix) + + // Set the bounds eg : "bottom-left", "Top right", "middle" etc... + const ox = o.ox != null ? o.ox : tx + const oy = o.oy != null ? o.oy : ty + + // Set the origin based on the current matrix location return [ox, oy] } diff --git a/src/matrix.js b/src/matrix.js index 4396816..07dc82b 100644 --- a/src/matrix.js +++ b/src/matrix.js @@ -48,7 +48,7 @@ SVG.Matrix = SVG.invent({ var currentTransform = new SVG.Matrix(this) // Construct the resulting matrix - var transformer = new SVG.Matrix() + var transformer = new SVG.Matrix(currentTransform) .translate(-t.ox, -t.oy) .scale(t.scaleX, t.scaleY) .skew(t.skewX, t.skewY) @@ -56,7 +56,6 @@ SVG.Matrix = SVG.invent({ .rotate(t.theta) .translate(t.ox, t.oy) .translate(t.rx, t.ry) - .lmultiply(currentTransform) // If we want the origin at a particular place, we force it there if (isFinite(t.px) || isFinite(t.py)) { |