diff options
| author | Ulrich-Matthias Schäfer <ulima.ums@googlemail.com> | 2018-10-08 15:18:53 +0200 |
|---|---|---|
| committer | Ulrich-Matthias Schäfer <ulima.ums@googlemail.com> | 2018-10-08 15:18:53 +0200 |
| commit | d3dd6ad74b35e674ab24a8d9bf0c3b2f336b5bca (patch) | |
| tree | bb6dfe01d1f2fc0ba270b42ae0a0bcb5a61f9349 /dirty.html | |
| parent | 179187327810f9219437b371adada85b843f8b71 (diff) | |
| download | svg.js-d3dd6ad74b35e674ab24a8d9bf0c3b2f336b5bca.tar.gz svg.js-d3dd6ad74b35e674ab24a8d9bf0c3b2f336b5bca.zip | |
Optimized the matrix functions so that the transform function is a multitude faster for parameterized input
Diffstat (limited to 'dirty.html')
| -rw-r--r-- | dirty.html | 48 |
1 files changed, 13 insertions, 35 deletions
@@ -249,51 +249,29 @@ let canvas = SVG('#canvas') /** * FUZZYS EXAMPLE */ -// // // Make the pink rectangle // let a = canvas.rect(200, 400).move(500, 400) // .attr('opacity', 0.3) // .addClass('pink') // .transform({ tx: 300, ty: 500, origin: 'top-left' }) // -// -// var timer = 0 -// a.timeline().source(() => { -// timer += 1 -// document.querySelector('#absolute span').textContent = timer -// return timer -// }) -// // let obj = { rotate: 100, origin: 'top-left'} // let obj2 = { rotate: 280, origin: 'center' } // let obj3 = { rotate: 1000, origin: 'center', translate: [300, 200]} // // -// // var c = a.clone() -// // var d = a.clone() -// // -// // -// // c.animate(1000) -// // //.transform(obj) -// // .transform(obj, true) // animation -// // -// // d.animate(3000) -// // //.transform(obj) -// // .transform(obj, true) // animation -// -// // a.clone().attr('fill', 'blue') -// // //.transform(obj) -// // .transform(obj2, true) // endPosition +// var c = a.clone() // -// window.EL = canvas.ellipse(50, 50) -// -// let b = a.clone() -// let bA = b.animate(new SVG.Spring(1000, 15)) -// -// SVG.on(document, 'mousemove', (e) => { -// let {x, y} = canvas.point(e.clientX, e.clientY) -// bA.transform ({tx: x, ty: y, rotate: (x + y) / 3}, true) -// }) +// c.animate(3000) +// .transform(obj) +// .transform(obj2, true) // animation // +// a.clone().attr('fill', 'blue') +// .transform(obj) +// .transform(obj2, true) // endPosition + + +// SAIVANS EXAMPLE + canvas.ellipse(20, 20).center(100, 100) let r = canvas.rect(200, 400).move(100, 100) @@ -353,13 +331,13 @@ setTimeout(runTransformation({ // canvas.circle(50).center(100, 0).attr('fill', 'gray') // // setTimeout(runTransformation({ -// rotate: 180, +// rotate: 360, // origin: [100, 0] // }), 0.1 * wait ) // // // setTimeout(runTransformation({ -// rotate: 180, +// rotate: 360, // }), 0.4 * wait) // const getConsole = (time) => { |