deblan/kute.js
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Fixed https://github.com/thednp/kute.js/issues/30

Browse source 
The script didn't handle polygon morphs when both shapes have same number of points.
This commit is contained in:
thednp 2016-08-22 17:10:26 +03:00
parent 5482d8383e
commit 04010b4cab
3 changed files with 29 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/kute-svg.js
View file

@ -72,19 +72,24 @@
arr = S.gSegs(s,e,this._mpr);
s1 = arr[0]; e1 = arr[1]; arL = e1.length;
} else {
s = S.pTA(s); e = S.pTA(e);
arL = Math.max(s.length,e.length);
if ( arL === e.length) { sm = s; lg = e; } else { sm = e; lg = s; }
sml = sm.length;
s = S.pTA(s); e = S.pTA(e);
smp = S.cP('M'+sm.join('L')+'z'); len = smp.getTotalLength() / arL;
for (var i=0; i<arL; i++){
tl = smp.getPointAtLength(len*i);
cs = S.gCP(len,tl,sm);
nsm.push( [ cs[0], cs[1] ] );
if ( s.length !== e.length ){
arL = Math.max(s.length,e.length);
if ( arL === e.length) { sm = s; lg = e; } else { sm = e; lg = s; }
sml = sm.length;
smp = S.cP('M'+sm.join('L')+'z'); len = smp.getTotalLength() / arL;
for (var i=0; i<arL; i++){
tl = smp.getPointAtLength(len*i);
cs = S.gCP(len,tl,sm);
nsm.push( [ cs[0], cs[1] ] );
}
if (arL === e.length) { e1 = lg; s1 = nsm; } else { s1 = lg; e1 = nsm; }
} else {
s1 = s; e1 = e;
}
if (arL === e.length) { e1 = lg; s1 = nsm; } else { s1 = lg; e1 = nsm; }
}
// reverse arrays

2
src/kute.js
View file

@ -30,7 +30,7 @@
K.selector = function(el,multi){ // a selector utility
var nl;
if (multi){
nl = typeof el === 'object' && el.length ? el : document.querySelectorAll(el);
nl = el instanceof NodeList ? el : document.querySelectorAll(el);
} else {
nl = typeof el === 'object' ? el : /^#/.test(el) ? document.getElementById(el.replace('#','')) : document.querySelector(el);
}

24
svg.html
View file

@ -167,19 +167,19 @@ var tween2 = KUTE.to('#triangle', { path: '#square' }).start();
<p>In the example below the triangle shape will morph into a square, then the square will morph into a star, so 2 tweens chained with a third that will morph back to the original triangle shape. For each tween the morph will use the number of points from the shape with most points as a sample size for the other shape. Let's have a look at the demo.</p>
<div class="featurettes">
<svg class="example-box-model example-box" id="morph-example2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" >
<path id="square" style="visibility:hidden" d="M25.508,12.011 L576.715,12.011 L576.715,584.766 L25.508,584.766 L25.508,12.011 z"/>
<path id="square2" style="visibility:hidden" d="M25.508,12.011 H576.715 V584.766 H25.508 V12.011z"/>
<path id="square3" style="visibility:hidden" d="M25.508,12.011 L576.715,12.011 V584.766 L25.508,584.766 V12.011 z"/>
<path id="triangle" class="bg-indigo" d="M301.113,12.011L576.715,584.766L25.508,584.766L301.113,12.011z"/>
<path id="star2" style="visibility:hidden" d="M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808
l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011z"/>
</svg>
<svg class="example-box-model example-box" id="morph-example2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" >
<path id="square" style="visibility:hidden" d="M25.508,12.011 L576.715,12.011 L576.715,584.766 L25.508,584.766 L25.508,12.011 z"/>
<path id="square2" style="visibility:hidden" d="M25.508,12.011 H576.715 V584.766 H25.508 V12.011z"/>
<path id="square3" style="visibility:hidden" d="M25.508,12.011 L576.715,12.011 V584.766 L25.508,584.766 V12.011 z"/>
<path id="triangle" class="bg-indigo" d="M301.113,12.011L576.715,584.766L25.508,584.766L301.113,12.011z"/>
<path id="star2" style="visibility:hidden" d="M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808
l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011z"/>
</svg>
<div class="example-buttons">
<a id="morphBtn2" class="btn btn-green" href="javascript:void(0)">Start</a>