mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2026-08-15 14:30:22 +00:00
fix indent on snapsvg
This commit is contained in:
tgfjt
+311
-311
@@ -5,231 +5,231 @@
|
||||
|
||||
window.onload=()=>{
|
||||
|
||||
var s = Snap("#svgout");
|
||||
var path = Snap.path;
|
||||
var s = Snap("#svgout");
|
||||
var path = Snap.path;
|
||||
// bboxing
|
||||
var b1 = path.bezierBBox(0, 0, 0, 0, 100, 100, 100, 100);
|
||||
var b2 = path.bezierBBox(50, 50, 50, 50, 150, 150, 150, 150);
|
||||
var b3 = path.bezierBBox(100, 100, 100, 100, 200, 200, 200, 200);
|
||||
|
||||
alert(b1);
|
||||
alert(b1);
|
||||
// all true
|
||||
console.log(path.isBBoxIntersect(b1, b2));
|
||||
console.log(path.isBBoxIntersect(b1, b3));
|
||||
console.log(path.isPointInsideBBox(b1, 50, 50));
|
||||
console.log(path.isPointInsideBBox(b2, 50, 50));
|
||||
console.log(!path.isPointInsideBBox(b3, 50, 50));
|
||||
|
||||
{
|
||||
// Snap Transforms
|
||||
|
||||
var c = s.circle( 200,200,10 );
|
||||
var r = s.rect(200,100,100,100,20,20).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'red', 'opacity': 0.3 });
|
||||
|
||||
var rclone = r.clone();
|
||||
var rclone2 = r.clone();
|
||||
var rclone3 = r.clone();
|
||||
var rclone4 = r.clone();
|
||||
var rclone5 = r.clone();
|
||||
|
||||
//t=relative transform, T=absolute transform, s=relative scale, S=absolute Scale
|
||||
//r=relative rotate, R=relative rotate
|
||||
//relative means it takes into account previous transforms to accumulate
|
||||
//here it doesn't make much difference, until we combine later
|
||||
|
||||
|
||||
rclone.transform( 't100,100');
|
||||
rclone2.transform( 'r20,200,200' );
|
||||
rclone3.transform( 'r40,200,200' );
|
||||
|
||||
s.text(350,150,"rotate around 200,200");
|
||||
|
||||
rclone4.transform( 't100,100r20,200,200' );
|
||||
rclone5.transform( 't100,100r40,200,200' );
|
||||
|
||||
s.text(450,250,"combined translate of 100,100 and rotate around 200,200");
|
||||
}
|
||||
|
||||
{
|
||||
// Filters - Blur
|
||||
s.attr({ viewBox: "0 0 600 600" });
|
||||
|
||||
var f = s.filter(Snap.filter.blur(5, 10));
|
||||
var shadow = s.filter(Snap.filter.shadow(0, 2, 3));
|
||||
var filterChild = f.node.firstChild;
|
||||
|
||||
var r = s.rect(100,100,100,100,20,20).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'red', filter: f });
|
||||
Snap.animate( 0, 10, function( value ) { filterChild.attributes[0].value = value + ',' + value; }, 1000 );
|
||||
|
||||
var t = s.text(0,50, 'Hover to blur, hover out for shadow' );
|
||||
|
||||
r.hover( addBlur, addShadow );
|
||||
|
||||
function addBlur() {
|
||||
this.attr({ filter: f });
|
||||
Snap.animate( 0, 10, function( value ) { filterChild.attributes[0].value = value + ',' + value; }, 1000 );
|
||||
};
|
||||
|
||||
function addShadow() {
|
||||
this.attr({ filter: shadow });
|
||||
};
|
||||
}
|
||||
|
||||
{
|
||||
// Drag Handler
|
||||
var rect = s.rect(20,20,40,40);
|
||||
var circle = s.circle(60,150,50);
|
||||
|
||||
var move = function(dx:number,dy:number) {
|
||||
this.attr({
|
||||
transform: this.data('origTransform') + (this.data('origTransform') ? "T" : "t") + [dx, dy]
|
||||
});
|
||||
}
|
||||
|
||||
var start = function() {
|
||||
this.data('origTransform', this.transform().local );
|
||||
}
|
||||
var stop = function() {
|
||||
console.log('finished dragging');
|
||||
}
|
||||
|
||||
rect.drag(move, start, stop );
|
||||
circle.drag(move, start, stop );
|
||||
|
||||
}
|
||||
|
||||
{
|
||||
// Snap drag and scale example
|
||||
var dragging = 0;
|
||||
var handleGroup:any;
|
||||
|
||||
function addHandleFunc() {
|
||||
if( dragging == 0 ) {
|
||||
dragging = 1;
|
||||
var bb = this.getBBox();
|
||||
var handle = new Array();
|
||||
handle[0] = s.circle(bb.x,bb.y,10).attr({class: 'handler'});;
|
||||
handle[1] = s.circle(bb.x+bb.width, bb.y, 10).attr({class: 'handler'});
|
||||
handleGroup = s.group(this, handle[0], handle[1]);
|
||||
handleGroup.drag(move,start,stop);
|
||||
} else {
|
||||
dragging = 0;
|
||||
s.append(this);
|
||||
handleGroup.selectAll('handler').remove();
|
||||
handleGroup.remove();
|
||||
}
|
||||
}
|
||||
|
||||
var start = function() {
|
||||
this.data('origTransform', this.transform().local);
|
||||
}
|
||||
|
||||
var move = function(dx:number,dy:number) {
|
||||
var scale = 1 + dx / 50;
|
||||
this.attr({
|
||||
transform: this.data('origTransform') + (this.data('origTransform') ? "S" : "s") + scale
|
||||
});
|
||||
}
|
||||
|
||||
var stop = function() {};
|
||||
|
||||
|
||||
var myRect = s.rect( 100,100,100,100 ).attr({fill: 'blue'});
|
||||
|
||||
myRect.dblclick( addHandleFunc );;
|
||||
|
||||
s.text(70,220, 'double click the rect');
|
||||
}
|
||||
|
||||
{
|
||||
// Snap mask
|
||||
var bigC = s.circle(200,200,175).attr({ stroke: 'silver', 'strokeWidth': 40, fill: 'silver' });
|
||||
{
|
||||
// Snap Transforms
|
||||
|
||||
var r = s.rect(100,100,100,100,20,20).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'red' });
|
||||
var c = s.circle(50,50,50).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'blue' });
|
||||
|
||||
var g = s.group(r,c);
|
||||
|
||||
g.attr({ mask: bigC });
|
||||
|
||||
g.animate({ transform: 'r360,150,150' }, 1000, mina.bounce );
|
||||
|
||||
}
|
||||
|
||||
{
|
||||
// Snap animated mask-clippath
|
||||
var bigC = s.circle(100,100,75).attr({ stroke: 'silver', 'strokeWidth': 40, fill: 'silver' });
|
||||
var bigC2 = s.circle(250,250,75).attr({ stroke: 'silver', 'strokeWidth': 40, fill: 'silver' });
|
||||
var clipG = s.group(bigC,bigC2);
|
||||
|
||||
var r = s.rect(100,100,100,100,20,20).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'red' });
|
||||
var c = s.circle(50,50,50).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'blue' });
|
||||
|
||||
var g = s.group(r,c);
|
||||
|
||||
g.attr({ mask: clipG });
|
||||
|
||||
g.animate({ transform: 'r360,150,150' }, 3000, mina.bounce );
|
||||
clipG.animate({ transform: 't200,0' }, 3000, mina.bounce, function() { clipG.animate({ transform: 't0,0' }, 3000, mina.bounce) } );
|
||||
|
||||
var c = s.circle( 200,200,10 );
|
||||
var r = s.rect(200,100,100,100,20,20).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'red', 'opacity': 0.3 });
|
||||
|
||||
}
|
||||
{
|
||||
// Snap load and animate svg
|
||||
var g = s.group();
|
||||
var tux = Snap.load("Dreaming_tux.svg", function ( loadedFragment:Snap.Element ) {
|
||||
g.append( loadedFragment );
|
||||
g.hover( hoverover, hoverout );
|
||||
g.text(300,100, 'hover over me');
|
||||
} );
|
||||
|
||||
var hoverover = function() { g.animate({ transform: 's2r45,150,150' }, 1000, mina.bounce ) };
|
||||
var hoverout = function() { g.animate({ transform: 's1r0,150,150' }, 1000, mina.bounce ) };
|
||||
var rclone = r.clone();
|
||||
var rclone2 = r.clone();
|
||||
var rclone3 = r.clone();
|
||||
var rclone4 = r.clone();
|
||||
var rclone5 = r.clone();
|
||||
|
||||
}
|
||||
|
||||
{
|
||||
// Snap path test if a point inside with translation
|
||||
var x:number, y:number, myTranslateX = 200, myTranslateY = 100;
|
||||
//t=relative transform, T=absolute transform, s=relative scale, S=absolute Scale
|
||||
//r=relative rotate, R=relative rotate
|
||||
//relative means it takes into account previous transforms to accumulate
|
||||
//here it doesn't make much difference, until we combine later
|
||||
|
||||
var myPathString = "M 60 0 L 120 0 L 180 60 L 180 120 L 120 180 L 60 180 L 0 120 L 0 60 Z";
|
||||
|
||||
var p = s.path( myPathString );
|
||||
var p2 = s.path( myPathString ).transform("t" + myTranslateX + "," + myTranslateY);
|
||||
|
||||
|
||||
for( var count = 0; count < 500; count++ ) {
|
||||
x = Math.random() * 800; y = Math.random() * 400;
|
||||
|
||||
c = s.circle( x,y,5 ).attr({ fill: "silver" });
|
||||
|
||||
// basic path
|
||||
if( Snap.path.isPointInside( myPathString, x,y ) ) {
|
||||
c.attr({ fill: "#ff0000" });
|
||||
}
|
||||
|
||||
// matching against path as though it was translated
|
||||
if( Snap.path.isPointInside( myPathString, x - myTranslateX, y - myTranslateY ) ) {
|
||||
c.attr({ fill: "#0000ff" });
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
{
|
||||
// Snap animate rotate a group
|
||||
var r = s.rect(100,100,100,100,20,20).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'red' });
|
||||
var c = s.circle(50,50,50).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'blue' });
|
||||
|
||||
var g = s.group(r,c);
|
||||
|
||||
g.animate({ transform: 'r360,150,150' }, 1000, mina.bounce );
|
||||
}
|
||||
|
||||
{
|
||||
// Snap animate in a sequence and multiple anims
|
||||
var myFrames = [{
|
||||
|
||||
rclone.transform( 't100,100');
|
||||
rclone2.transform( 'r20,200,200' );
|
||||
rclone3.transform( 'r40,200,200' );
|
||||
|
||||
s.text(350,150,"rotate around 200,200");
|
||||
|
||||
rclone4.transform( 't100,100r20,200,200' );
|
||||
rclone5.transform( 't100,100r40,200,200' );
|
||||
|
||||
s.text(450,250,"combined translate of 100,100 and rotate around 200,200");
|
||||
}
|
||||
|
||||
{
|
||||
// Filters - Blur
|
||||
s.attr({ viewBox: "0 0 600 600" });
|
||||
|
||||
var f = s.filter(Snap.filter.blur(5, 10));
|
||||
var shadow = s.filter(Snap.filter.shadow(0, 2, 3));
|
||||
var filterChild = f.node.firstChild;
|
||||
|
||||
var r = s.rect(100,100,100,100,20,20).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'red', filter: f });
|
||||
Snap.animate( 0, 10, function( value ) { filterChild.attributes[0].value = value + ',' + value; }, 1000 );
|
||||
|
||||
var t = s.text(0,50, 'Hover to blur, hover out for shadow' );
|
||||
|
||||
r.hover( addBlur, addShadow );
|
||||
|
||||
function addBlur() {
|
||||
this.attr({ filter: f });
|
||||
Snap.animate( 0, 10, function( value ) { filterChild.attributes[0].value = value + ',' + value; }, 1000 );
|
||||
};
|
||||
|
||||
function addShadow() {
|
||||
this.attr({ filter: shadow });
|
||||
};
|
||||
}
|
||||
|
||||
{
|
||||
// Drag Handler
|
||||
var rect = s.rect(20,20,40,40);
|
||||
var circle = s.circle(60,150,50);
|
||||
|
||||
var move = function(dx:number,dy:number) {
|
||||
this.attr({
|
||||
transform: this.data('origTransform') + (this.data('origTransform') ? "T" : "t") + [dx, dy]
|
||||
});
|
||||
}
|
||||
|
||||
var start = function() {
|
||||
this.data('origTransform', this.transform().local );
|
||||
}
|
||||
var stop = function() {
|
||||
console.log('finished dragging');
|
||||
}
|
||||
|
||||
rect.drag(move, start, stop );
|
||||
circle.drag(move, start, stop );
|
||||
|
||||
}
|
||||
|
||||
{
|
||||
// Snap drag and scale example
|
||||
var dragging = 0;
|
||||
var handleGroup:any;
|
||||
|
||||
function addHandleFunc() {
|
||||
if( dragging == 0 ) {
|
||||
dragging = 1;
|
||||
var bb = this.getBBox();
|
||||
var handle = new Array();
|
||||
handle[0] = s.circle(bb.x,bb.y,10).attr({class: 'handler'});;
|
||||
handle[1] = s.circle(bb.x+bb.width, bb.y, 10).attr({class: 'handler'});
|
||||
handleGroup = s.group(this, handle[0], handle[1]);
|
||||
handleGroup.drag(move,start,stop);
|
||||
} else {
|
||||
dragging = 0;
|
||||
s.append(this);
|
||||
handleGroup.selectAll('handler').remove();
|
||||
handleGroup.remove();
|
||||
}
|
||||
}
|
||||
|
||||
var start = function() {
|
||||
this.data('origTransform', this.transform().local);
|
||||
}
|
||||
|
||||
var move = function(dx:number,dy:number) {
|
||||
var scale = 1 + dx / 50;
|
||||
this.attr({
|
||||
transform: this.data('origTransform') + (this.data('origTransform') ? "S" : "s") + scale
|
||||
});
|
||||
}
|
||||
|
||||
var stop = function() {};
|
||||
|
||||
|
||||
var myRect = s.rect( 100,100,100,100 ).attr({fill: 'blue'});
|
||||
|
||||
myRect.dblclick( addHandleFunc );;
|
||||
|
||||
s.text(70,220, 'double click the rect');
|
||||
}
|
||||
|
||||
{
|
||||
// Snap mask
|
||||
var bigC = s.circle(200,200,175).attr({ stroke: 'silver', 'strokeWidth': 40, fill: 'silver' });
|
||||
|
||||
var r = s.rect(100,100,100,100,20,20).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'red' });
|
||||
var c = s.circle(50,50,50).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'blue' });
|
||||
|
||||
var g = s.group(r,c);
|
||||
|
||||
g.attr({ mask: bigC });
|
||||
|
||||
g.animate({ transform: 'r360,150,150' }, 1000, mina.bounce );
|
||||
|
||||
}
|
||||
|
||||
{
|
||||
// Snap animated mask-clippath
|
||||
var bigC = s.circle(100,100,75).attr({ stroke: 'silver', 'strokeWidth': 40, fill: 'silver' });
|
||||
var bigC2 = s.circle(250,250,75).attr({ stroke: 'silver', 'strokeWidth': 40, fill: 'silver' });
|
||||
var clipG = s.group(bigC,bigC2);
|
||||
|
||||
var r = s.rect(100,100,100,100,20,20).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'red' });
|
||||
var c = s.circle(50,50,50).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'blue' });
|
||||
|
||||
var g = s.group(r,c);
|
||||
|
||||
g.attr({ mask: clipG });
|
||||
|
||||
g.animate({ transform: 'r360,150,150' }, 3000, mina.bounce );
|
||||
clipG.animate({ transform: 't200,0' }, 3000, mina.bounce, function() { clipG.animate({ transform: 't0,0' }, 3000, mina.bounce) } );
|
||||
|
||||
|
||||
}
|
||||
{
|
||||
// Snap load and animate svg
|
||||
var g = s.group();
|
||||
var tux = Snap.load("Dreaming_tux.svg", function ( loadedFragment:Snap.Element ) {
|
||||
g.append( loadedFragment );
|
||||
g.hover( hoverover, hoverout );
|
||||
g.text(300,100, 'hover over me');
|
||||
} );
|
||||
|
||||
var hoverover = function() { g.animate({ transform: 's2r45,150,150' }, 1000, mina.bounce ) };
|
||||
var hoverout = function() { g.animate({ transform: 's1r0,150,150' }, 1000, mina.bounce ) };
|
||||
|
||||
}
|
||||
|
||||
{
|
||||
// Snap path test if a point inside with translation
|
||||
var x:number, y:number, myTranslateX = 200, myTranslateY = 100;
|
||||
|
||||
var myPathString = "M 60 0 L 120 0 L 180 60 L 180 120 L 120 180 L 60 180 L 0 120 L 0 60 Z";
|
||||
|
||||
var p = s.path( myPathString );
|
||||
var p2 = s.path( myPathString ).transform("t" + myTranslateX + "," + myTranslateY);
|
||||
|
||||
|
||||
for( var count = 0; count < 500; count++ ) {
|
||||
x = Math.random() * 800; y = Math.random() * 400;
|
||||
|
||||
c = s.circle( x,y,5 ).attr({ fill: "silver" });
|
||||
|
||||
// basic path
|
||||
if( Snap.path.isPointInside( myPathString, x,y ) ) {
|
||||
c.attr({ fill: "#ff0000" });
|
||||
}
|
||||
|
||||
// matching against path as though it was translated
|
||||
if( Snap.path.isPointInside( myPathString, x - myTranslateX, y - myTranslateY ) ) {
|
||||
c.attr({ fill: "#0000ff" });
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
{
|
||||
// Snap animate rotate a group
|
||||
var r = s.rect(100,100,100,100,20,20).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'red' });
|
||||
var c = s.circle(50,50,50).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'blue' });
|
||||
|
||||
var g = s.group(r,c);
|
||||
|
||||
g.animate({ transform: 'r360,150,150' }, 1000, mina.bounce );
|
||||
}
|
||||
|
||||
{
|
||||
// Snap animate in a sequence and multiple anims
|
||||
var myFrames = [{
|
||||
animation: { transform: 'r360,150,150' }, dur: 1000 },
|
||||
{ animation: { transform: 't100,-100s2,3' }, dur: 1000 },
|
||||
{ animation: { transform: 't100,100' }, dur: 1000 },
|
||||
@@ -237,108 +237,108 @@ window.onload=()=>{
|
||||
{ animation: { transform: 's1,0' }, dur: 1000 },
|
||||
{ animation: { transform: 's1,1' }, dur: 1000 }];
|
||||
|
||||
var rectAnim = [{
|
||||
animation: { fill: 'green', transform: 'r1180,150,150' }, dur: 1500 },
|
||||
{ animation: { fill: 'silver', transform: 'r360,150,150' }, dur: 1500 }];
|
||||
|
||||
var circleAnim = [{ animation: { transform: 's0,1' }, dur: 1500 },
|
||||
{ animation: { transform: 's1,1' }, dur: 1500 }];
|
||||
|
||||
function nextFrame ( el:Snap.Element, frameArray:any[], whichFrame:number ) {
|
||||
if( whichFrame >= frameArray.length ) { return }
|
||||
el.animate( frameArray[ whichFrame ].animation, frameArray[ whichFrame ].dur, nextFrame.bind( null, el, frameArray, whichFrame + 1 ) );
|
||||
|
||||
}
|
||||
|
||||
var r = s.rect(100,100,100,100,20,20).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'red' });
|
||||
var c = s.circle(50,50,50).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'blue' });
|
||||
|
||||
var g = s.group(r,c);
|
||||
|
||||
//g.animate({ transform: 'r360,150,150' }, 1000, mina.bounce );
|
||||
nextFrame( g, myFrames, 0 );
|
||||
nextFrame( r, rectAnim, 0 );
|
||||
nextFrame( c, circleAnim, 0 );
|
||||
}
|
||||
{
|
||||
// Snap animate number
|
||||
var t = s.text(50,50,0);
|
||||
var rectAnim = [{
|
||||
animation: { fill: 'green', transform: 'r1180,150,150' }, dur: 1500 },
|
||||
{ animation: { fill: 'silver', transform: 'r360,150,150' }, dur: 1500 }];
|
||||
|
||||
Snap.animate(0, 100, function (value) {
|
||||
t.attr({text: Math.round(value)});
|
||||
}, 1000);
|
||||
}
|
||||
{
|
||||
// Snap animate text announce
|
||||
var text = 'Here is some dynamic exciting announcement';
|
||||
// inspired from http://codepen.io/GreenSock/pen/AGzci
|
||||
|
||||
var textArray = text.split(" ");
|
||||
var len = textArray.length;
|
||||
var timing = 750;
|
||||
|
||||
for( var index=0; index < len; index++ ) {
|
||||
|
||||
(function() {
|
||||
|
||||
var svgTextElement = s.text(350,100, textArray[index]).attr({ fontSize: '120px', opacity: 0, "text-anchor": "middle" });
|
||||
|
||||
setTimeout( function() {
|
||||
|
||||
Snap.animate( 0, 1, function( value ) {
|
||||
//svgTextElement.transform('s' + value ); // Animate by transform
|
||||
svgTextElement.attr({ 'font-size': value * 100, opacity: value }); // Animate by font-size ?
|
||||
}, timing, mina.bounce, function() { svgTextElement.remove() } );
|
||||
}
|
||||
,index * timing)
|
||||
}());
|
||||
};
|
||||
}
|
||||
{
|
||||
// Snap animate on click
|
||||
var r = s.rect(100,100,100,100,20,20).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'red' });
|
||||
var c = s.circle(50,50,50).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'blue' });
|
||||
var otherRect = s.rect(200,200,50,50,10,10).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'green' });
|
||||
|
||||
var g = s.group(r,c);
|
||||
|
||||
var clickFunc = function () {
|
||||
g.transform(''); // reset the animation, may not be needed
|
||||
otherRect.transform('');
|
||||
g.animate({ transform: 'r45,150,150' }, 1000, mina.bounce ) ;;
|
||||
otherRect.animate({ transform: 'r360, 150,150' },2000, mina.bounce, endAnim );
|
||||
};
|
||||
|
||||
var endAnim = function() {
|
||||
otherRect.animate({ transform: 'r90,200,200' }, 2000, mina.bounce );
|
||||
}
|
||||
|
||||
g.click( clickFunc );
|
||||
}
|
||||
var circleAnim = [{ animation: { transform: 's0,1' }, dur: 1500 },
|
||||
{ animation: { transform: 's1,1' }, dur: 1500 }];
|
||||
|
||||
{
|
||||
// Snap and the matrix
|
||||
var s = Snap("#svgout");
|
||||
function nextFrame ( el:Snap.Element, frameArray:any[], whichFrame:number ) {
|
||||
if( whichFrame >= frameArray.length ) { return }
|
||||
el.animate( frameArray[ whichFrame ].animation, frameArray[ whichFrame ].dur, nextFrame.bind( null, el, frameArray, whichFrame + 1 ) );
|
||||
|
||||
var r = s.rect(100,100,100,100,20,20).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'red' });
|
||||
var c = s.circle(50,50,50).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'blue' });
|
||||
var t = s.text(150,75,'The order of transformations is important!!!');
|
||||
var g = s.group(r,c,t);
|
||||
|
||||
|
||||
// TODO: add constructor to Matrix
|
||||
//var myMatrix = new Snap.Matrix();
|
||||
var myMatrix :Snap.Matrix;
|
||||
myMatrix.scale(4,2); // play with scaling before and after the rotate
|
||||
myMatrix.translate(100,0); // this translate will not be applied to the rotation
|
||||
myMatrix.rotate(45); // rotate
|
||||
//myMatrix.scale(4,2);
|
||||
//myMatrix.translate(100,0); // this translate will take into account the rotated coord space
|
||||
//g.animate({ transform: myMatrix.toTransformString() },1000); // probably not needed
|
||||
|
||||
var myInvertedMatrix = myMatrix.invert();
|
||||
|
||||
g.animate({ transform: myMatrix },3000, mina.bounce, function() { g.animate({ transform: myInvertedMatrix }, 3000, mina.bounce) } );
|
||||
console.log( g.transform(), g.matrix, myMatrix.split() );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var r = s.rect(100,100,100,100,20,20).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'red' });
|
||||
var c = s.circle(50,50,50).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'blue' });
|
||||
|
||||
var g = s.group(r,c);
|
||||
|
||||
//g.animate({ transform: 'r360,150,150' }, 1000, mina.bounce );
|
||||
nextFrame( g, myFrames, 0 );
|
||||
nextFrame( r, rectAnim, 0 );
|
||||
nextFrame( c, circleAnim, 0 );
|
||||
}
|
||||
{
|
||||
// Snap animate number
|
||||
var t = s.text(50,50,0);
|
||||
|
||||
Snap.animate(0, 100, function (value) {
|
||||
t.attr({text: Math.round(value)});
|
||||
}, 1000);
|
||||
}
|
||||
{
|
||||
// Snap animate text announce
|
||||
var text = 'Here is some dynamic exciting announcement';
|
||||
// inspired from http://codepen.io/GreenSock/pen/AGzci
|
||||
|
||||
var textArray = text.split(" ");
|
||||
var len = textArray.length;
|
||||
var timing = 750;
|
||||
|
||||
for( var index=0; index < len; index++ ) {
|
||||
|
||||
(function() {
|
||||
|
||||
var svgTextElement = s.text(350,100, textArray[index]).attr({ fontSize: '120px', opacity: 0, "text-anchor": "middle" });
|
||||
|
||||
setTimeout( function() {
|
||||
|
||||
Snap.animate( 0, 1, function( value ) {
|
||||
//svgTextElement.transform('s' + value ); // Animate by transform
|
||||
svgTextElement.attr({ 'font-size': value * 100, opacity: value }); // Animate by font-size ?
|
||||
}, timing, mina.bounce, function() { svgTextElement.remove() } );
|
||||
}
|
||||
,index * timing)
|
||||
}());
|
||||
};
|
||||
}
|
||||
{
|
||||
// Snap animate on click
|
||||
var r = s.rect(100,100,100,100,20,20).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'red' });
|
||||
var c = s.circle(50,50,50).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'blue' });
|
||||
var otherRect = s.rect(200,200,50,50,10,10).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'green' });
|
||||
|
||||
var g = s.group(r,c);
|
||||
|
||||
var clickFunc = function () {
|
||||
g.transform(''); // reset the animation, may not be needed
|
||||
otherRect.transform('');
|
||||
g.animate({ transform: 'r45,150,150' }, 1000, mina.bounce ) ;;
|
||||
otherRect.animate({ transform: 'r360, 150,150' },2000, mina.bounce, endAnim );
|
||||
};
|
||||
|
||||
var endAnim = function() {
|
||||
otherRect.animate({ transform: 'r90,200,200' }, 2000, mina.bounce );
|
||||
}
|
||||
|
||||
g.click( clickFunc );
|
||||
}
|
||||
|
||||
{
|
||||
// Snap and the matrix
|
||||
var s = Snap("#svgout");
|
||||
|
||||
var r = s.rect(100,100,100,100,20,20).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'red' });
|
||||
var c = s.circle(50,50,50).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'blue' });
|
||||
var t = s.text(150,75,'The order of transformations is important!!!');
|
||||
var g = s.group(r,c,t);
|
||||
|
||||
|
||||
// TODO: add constructor to Matrix
|
||||
//var myMatrix = new Snap.Matrix();
|
||||
var myMatrix :Snap.Matrix;
|
||||
myMatrix.scale(4,2); // play with scaling before and after the rotate
|
||||
myMatrix.translate(100,0); // this translate will not be applied to the rotation
|
||||
myMatrix.rotate(45); // rotate
|
||||
//myMatrix.scale(4,2);
|
||||
//myMatrix.translate(100,0); // this translate will take into account the rotated coord space
|
||||
//g.animate({ transform: myMatrix.toTransformString() },1000); // probably not needed
|
||||
|
||||
var myInvertedMatrix = myMatrix.invert();
|
||||
|
||||
g.animate({ transform: myMatrix },3000, mina.bounce, function() { g.animate({ transform: myInvertedMatrix }, 3000, mina.bounce) } );
|
||||
console.log( g.transform(), g.matrix, myMatrix.split() );
|
||||
}
|
||||
}
|
||||
|
||||
Vendored
+261
-262
@@ -37,16 +37,16 @@ declare module mina {
|
||||
update(): void;
|
||||
}
|
||||
|
||||
export function backin(n:number):number;
|
||||
export function backout(n:number):number;
|
||||
export function bounce(n:number):number;
|
||||
export function easein(n:number):number;
|
||||
export function easeinout(n:number):number;
|
||||
export function easeout(n:number):number;
|
||||
export function elastic(n:number):number;
|
||||
export function getById(id:string):AnimationDescriptor;
|
||||
export function linear(n:number):number;
|
||||
export function time():number;
|
||||
export function backin(n:number):number;
|
||||
export function backout(n:number):number;
|
||||
export function bounce(n:number):number;
|
||||
export function easein(n:number):number;
|
||||
export function easeinout(n:number):number;
|
||||
export function easeout(n:number):number;
|
||||
export function elastic(n:number):number;
|
||||
export function getById(id:string):AnimationDescriptor;
|
||||
export function linear(n:number):number;
|
||||
export function time():number;
|
||||
}
|
||||
|
||||
declare function Snap(width:number|string,height:number|string):Snap.Paper;
|
||||
@@ -54,112 +54,112 @@ declare function Snap(query:string):Snap.Paper;
|
||||
declare function Snap(DOM:SVGElement):Snap.Paper;
|
||||
|
||||
declare module Snap {
|
||||
export var filter:Filter;
|
||||
export var path:Path;
|
||||
export var filter:Filter;
|
||||
export var path:Path;
|
||||
|
||||
export function Matrix():void;
|
||||
export function matrix():Matrix;
|
||||
export function matrix(a:number,b:number,c:number,d:number,e:number,f:number):Matrix;
|
||||
export function matrix(svgMatrix:SVGMatrix):Matrix;
|
||||
export function Matrix():void;
|
||||
export function matrix():Matrix;
|
||||
export function matrix(a:number,b:number,c:number,d:number,e:number,f:number):Matrix;
|
||||
export function matrix(svgMatrix:SVGMatrix):Matrix;
|
||||
|
||||
export function ajax(url:string,postData:string,callback:Function,scope?:Object):XMLHttpRequest;
|
||||
export function ajax(url:string,postData:Object,callback:Function,scope?:Object):XMLHttpRequest;
|
||||
export function ajax(url:string,callback:Function,scope?:Object):XMLHttpRequest;
|
||||
export function format(token:string,json:Object):string;
|
||||
export function fragment(varargs:any):Fragment;
|
||||
export function getElementByPoint(x:number,y:number):Snap.Element;
|
||||
export function is(o:any,type:string):boolean;
|
||||
export function load(url:string,callback:Function,scope?:Object):void;
|
||||
export function plugin(f:Function):void;
|
||||
export function select(query:string):Snap.Element;
|
||||
export function selectAll(query:string):any;
|
||||
export function snapTo(values:Array<number>,value:number,tolerance?:number):number;
|
||||
export function ajax(url:string,postData:string,callback:Function,scope?:Object):XMLHttpRequest;
|
||||
export function ajax(url:string,postData:Object,callback:Function,scope?:Object):XMLHttpRequest;
|
||||
export function ajax(url:string,callback:Function,scope?:Object):XMLHttpRequest;
|
||||
export function format(token:string,json:Object):string;
|
||||
export function fragment(varargs:any):Fragment;
|
||||
export function getElementByPoint(x:number,y:number):Snap.Element;
|
||||
export function is(o:any,type:string):boolean;
|
||||
export function load(url:string,callback:Function,scope?:Object):void;
|
||||
export function plugin(f:Function):void;
|
||||
export function select(query:string):Snap.Element;
|
||||
export function selectAll(query:string):any;
|
||||
export function snapTo(values:Array<number>,value:number,tolerance?:number):number;
|
||||
|
||||
export function animate(from:number|number[],to:number|number[],updater:(n:number)=>void,duration:number,easing?:(num:number)=>number,callback?:()=>void):mina.MinaAnimation;
|
||||
export function animation(attr:Object,duration:number,easing?:(num:number)=>number,callback?:()=>void):Snap.Animation;
|
||||
export function animate(from:number|number[],to:number|number[],updater:(n:number)=>void,duration:number,easing?:(num:number)=>number,callback?:()=>void):mina.MinaAnimation;
|
||||
export function animation(attr:Object,duration:number,easing?:(num:number)=>number,callback?:()=>void):Snap.Animation;
|
||||
|
||||
export function color(clr:string):RGBHSB;
|
||||
export function getRGB(color:string):RGB;
|
||||
export function hsb(h:number,s:number,b:number):HSB;
|
||||
export function hsl(h:number,s:number,l:number):HSL;
|
||||
export function rgb(r:number,g:number,b:number):RGB;
|
||||
export function hsb2rgb(h:number,s:number,v:number):RGB;
|
||||
export function hsl2rgb(h:number,s:number,l:number):RGB;
|
||||
export function rgb2hsb(r:number,g:number,b:number):HSB;
|
||||
export function rgb2hsl(r:number,g:number,b:number):HSL;
|
||||
export function color(clr:string):RGBHSB;
|
||||
export function getRGB(color:string):RGB;
|
||||
export function hsb(h:number,s:number,b:number):HSB;
|
||||
export function hsl(h:number,s:number,l:number):HSL;
|
||||
export function rgb(r:number,g:number,b:number):RGB;
|
||||
export function hsb2rgb(h:number,s:number,v:number):RGB;
|
||||
export function hsl2rgb(h:number,s:number,l:number):RGB;
|
||||
export function rgb2hsb(r:number,g:number,b:number):HSB;
|
||||
export function rgb2hsl(r:number,g:number,b:number):HSL;
|
||||
|
||||
export function angle(x1:number,y1:number,x2:number,y2:number,x3?:number,y3?:number):number;
|
||||
export function rad(deg:number):number;
|
||||
export function deg(rad:number):number;
|
||||
export function sin(angle: number): number;
|
||||
export function cos(angle: number): number;
|
||||
export function tan(angle: number): number;
|
||||
export function asin(angle: number): number;
|
||||
export function acos(angle: number): number;
|
||||
export function atan(angle: number): number;
|
||||
export function atan2(angle: number): number;
|
||||
export function angle(x1:number,y1:number,x2:number,y2:number,x3?:number,y3?:number):number;
|
||||
export function rad(deg:number):number;
|
||||
export function deg(rad:number):number;
|
||||
export function sin(angle: number): number;
|
||||
export function cos(angle: number): number;
|
||||
export function tan(angle: number): number;
|
||||
export function asin(angle: number): number;
|
||||
export function acos(angle: number): number;
|
||||
export function atan(angle: number): number;
|
||||
export function atan2(angle: number): number;
|
||||
|
||||
export function len(x1: number, y1: number, x2: number, y2: number): number;
|
||||
export function len2(x1: number, y1: number, x2: number, y2: number): number;
|
||||
export function len(x1: number, y1: number, x2: number, y2: number): number;
|
||||
export function len2(x1: number, y1: number, x2: number, y2: number): number;
|
||||
|
||||
export function parse(svg:string):Fragment;
|
||||
export function parsePathString(pathString:string):Array<any>;
|
||||
export function parsePathString(pathString:Array<string>):Array<any>;
|
||||
export function parseTransformString(TString:string):Array<any>;
|
||||
export function parseTransformString(TString:Array<string>):Array<any>;
|
||||
export function parse(svg:string):Fragment;
|
||||
export function parsePathString(pathString:string):Array<any>;
|
||||
export function parsePathString(pathString:Array<string>):Array<any>;
|
||||
export function parseTransformString(TString:string):Array<any>;
|
||||
export function parseTransformString(TString:Array<string>):Array<any>;
|
||||
|
||||
export function closest(x: number, y: number, X: number, Y: number): boolean;
|
||||
export function closest(x: number, y: number, X: number, Y: number): boolean;
|
||||
|
||||
export interface RGB {
|
||||
r:number;
|
||||
g:number;
|
||||
b:number;
|
||||
hex:string;
|
||||
}
|
||||
export interface RGB {
|
||||
r:number;
|
||||
g:number;
|
||||
b:number;
|
||||
hex:string;
|
||||
}
|
||||
|
||||
export interface HSB {
|
||||
h:number;
|
||||
s:number;
|
||||
b:number;
|
||||
}
|
||||
export interface HSB {
|
||||
h:number;
|
||||
s:number;
|
||||
b:number;
|
||||
}
|
||||
|
||||
export interface RGBHSB {
|
||||
r:number;
|
||||
g:number;
|
||||
b:number;
|
||||
hex:string;
|
||||
error:boolean;
|
||||
h:number;
|
||||
s:number;
|
||||
v:number;
|
||||
l:number;
|
||||
}
|
||||
export interface RGBHSB {
|
||||
r:number;
|
||||
g:number;
|
||||
b:number;
|
||||
hex:string;
|
||||
error:boolean;
|
||||
h:number;
|
||||
s:number;
|
||||
v:number;
|
||||
l:number;
|
||||
}
|
||||
|
||||
export interface HSL {
|
||||
h:number;
|
||||
s:number;
|
||||
l:number;
|
||||
}
|
||||
export interface HSL {
|
||||
h:number;
|
||||
s:number;
|
||||
l:number;
|
||||
}
|
||||
|
||||
export interface BBox {
|
||||
cx:number;
|
||||
cy:number;
|
||||
h:number;
|
||||
height:number;
|
||||
path:number;
|
||||
r0:number;
|
||||
r1:number;
|
||||
r2:number;
|
||||
vb:string;
|
||||
w:number;
|
||||
width:number;
|
||||
x2:number;
|
||||
x:number;
|
||||
y2:number;
|
||||
y:number;
|
||||
}
|
||||
export interface BBox {
|
||||
cx:number;
|
||||
cy:number;
|
||||
h:number;
|
||||
height:number;
|
||||
path:number;
|
||||
r0:number;
|
||||
r1:number;
|
||||
r2:number;
|
||||
vb:string;
|
||||
w:number;
|
||||
width:number;
|
||||
x2:number;
|
||||
x:number;
|
||||
y2:number;
|
||||
y:number;
|
||||
}
|
||||
|
||||
export interface TransformationDescriptor {
|
||||
export interface TransformationDescriptor {
|
||||
string: string;
|
||||
globalMatrix: Snap.Matrix;
|
||||
localMatrix: Snap.Matrix;
|
||||
@@ -169,61 +169,61 @@ declare module Snap {
|
||||
toString(): string;
|
||||
}
|
||||
|
||||
export interface Animation {
|
||||
attr:{[attr:string]:string|number|boolean|any};
|
||||
duration:number;
|
||||
easing?:(num:number)=>number;
|
||||
callback?:()=>void;
|
||||
}
|
||||
export interface Animation {
|
||||
attr:{[attr:string]:string|number|boolean|any};
|
||||
duration:number;
|
||||
easing?:(num:number)=>number;
|
||||
callback?:()=>void;
|
||||
}
|
||||
|
||||
export interface Element {
|
||||
add(el:Snap.Element):Snap.Element;
|
||||
addClass(value:string):Snap.Element;
|
||||
after(el:Snap.Element):Snap.Element;
|
||||
align(el: Snap.Element, way: string):Snap.Element;
|
||||
animate(animation:any):Snap.Element;
|
||||
animate(attrs:{[attr:string]:string|number|boolean|any},duration:number,easing?:(num: number)=> number,callback?:()=>void):Snap.Element;
|
||||
append(el:Snap.Element):Snap.Element;
|
||||
appendTo(el:Snap.Element):Snap.Element;
|
||||
asPX(attr:string,value?:string):number; //TODO: check what is really returned
|
||||
attr(param:string):string;
|
||||
attr(params:{[attr:string]:string|number|boolean|any}):Snap.Element;
|
||||
before(el:Snap.Element):Snap.Element;
|
||||
children(): Snap.Element[];
|
||||
clone():Snap.Element;
|
||||
data(key:string,value?:any):any;
|
||||
getAlign(el: Snap.Element, way: string): string;
|
||||
getBBox():BBox;
|
||||
getPointAtLength(length:number):{x:number, y:number, alpha:number};
|
||||
getSubpath(from:number,to:number):string;
|
||||
getTotalLength():number;
|
||||
hasClass(value:string):boolean;
|
||||
inAnim(): { anim: Animation; mina: mina.AnimationDescriptor; curStatus: number; status: (n?: number) => number; stop: () => void }[];
|
||||
innerSVG():string;
|
||||
insertAfter(el:Snap.Element):Snap.Element;
|
||||
insertBefore(el:Snap.Element):Snap.Element;
|
||||
marker(x:number,y:number,width:number,height:number,refX:number,refY:number):Snap.Element;
|
||||
node:HTMLElement;
|
||||
outerSVG():string;
|
||||
parent():Snap.Element;
|
||||
pattern(x:any,y:any,width:any,height:any):Snap.Element;
|
||||
prepend(el:Snap.Element):Snap.Element;
|
||||
prependTo(el:Snap.Element):Snap.Element;
|
||||
remove():Snap.Element;
|
||||
removeClass(value:string):Snap.Element;
|
||||
removeData(key?:string):Snap.Element;
|
||||
select(query:string):Snap.Element;
|
||||
stop():Snap.Element;
|
||||
toDefs():Snap.Element;
|
||||
toJSON(): any;
|
||||
toggleClass(value:string,flag:boolean):Snap.Element;
|
||||
toPattern(x:number,y:number,width:number,height:number):Object;
|
||||
toPattern(x:string,y:string,width:string,height:string):Object;
|
||||
toString():string;
|
||||
transform(): TransformationDescriptor;
|
||||
transform(tstr:string):Snap.Element;
|
||||
type:string;
|
||||
use():Object;
|
||||
export interface Element {
|
||||
add(el:Snap.Element):Snap.Element;
|
||||
addClass(value:string):Snap.Element;
|
||||
after(el:Snap.Element):Snap.Element;
|
||||
align(el: Snap.Element, way: string):Snap.Element;
|
||||
animate(animation:any):Snap.Element;
|
||||
animate(attrs:{[attr:string]:string|number|boolean|any},duration:number,easing?:(num: number)=> number,callback?:()=>void):Snap.Element;
|
||||
append(el:Snap.Element):Snap.Element;
|
||||
appendTo(el:Snap.Element):Snap.Element;
|
||||
asPX(attr:string,value?:string):number; //TODO: check what is really returned
|
||||
attr(param:string):string;
|
||||
attr(params:{[attr:string]:string|number|boolean|any}):Snap.Element;
|
||||
before(el:Snap.Element):Snap.Element;
|
||||
children(): Snap.Element[];
|
||||
clone():Snap.Element;
|
||||
data(key:string,value?:any):any;
|
||||
getAlign(el: Snap.Element, way: string): string;
|
||||
getBBox():BBox;
|
||||
getPointAtLength(length:number):{x:number, y:number, alpha:number};
|
||||
getSubpath(from:number,to:number):string;
|
||||
getTotalLength():number;
|
||||
hasClass(value:string):boolean;
|
||||
inAnim(): { anim: Animation; mina: mina.AnimationDescriptor; curStatus: number; status: (n?: number) => number; stop: () => void }[];
|
||||
innerSVG():string;
|
||||
insertAfter(el:Snap.Element):Snap.Element;
|
||||
insertBefore(el:Snap.Element):Snap.Element;
|
||||
marker(x:number,y:number,width:number,height:number,refX:number,refY:number):Snap.Element;
|
||||
node:HTMLElement;
|
||||
outerSVG():string;
|
||||
parent():Snap.Element;
|
||||
pattern(x:any,y:any,width:any,height:any):Snap.Element;
|
||||
prepend(el:Snap.Element):Snap.Element;
|
||||
prependTo(el:Snap.Element):Snap.Element;
|
||||
remove():Snap.Element;
|
||||
removeClass(value:string):Snap.Element;
|
||||
removeData(key?:string):Snap.Element;
|
||||
select(query:string):Snap.Element;
|
||||
stop():Snap.Element;
|
||||
toDefs():Snap.Element;
|
||||
toJSON(): any;
|
||||
toggleClass(value:string,flag:boolean):Snap.Element;
|
||||
toPattern(x:number,y:number,width:number,height:number):Object;
|
||||
toPattern(x:string,y:string,width:string,height:string):Object;
|
||||
toString():string;
|
||||
transform(): TransformationDescriptor;
|
||||
transform(tstr:string):Snap.Element;
|
||||
type:string;
|
||||
use():Object;
|
||||
selectAll(): Snap.Set;
|
||||
selectAll(query: string): Snap.Set;
|
||||
|
||||
@@ -255,7 +255,7 @@ declare module Snap {
|
||||
hover(hoverInHandler: (event: MouseEvent) => void, hoverOutHandler: (event: MouseEvent) => void, inThisArg?: any, outThisArg?: any): Snap.Element;
|
||||
unhover(hoverInHandler: (event: MouseEvent) => void, hoverOutHandler: (event: MouseEvent) => void): Snap.Element;
|
||||
|
||||
drag():Snap.Element;
|
||||
drag():Snap.Element;
|
||||
drag(onMove: (dx: number, dy: number, x: number, y: number, event: MouseEvent) => void,
|
||||
onStart: (x: number, y: number, event: MouseEvent) => void,
|
||||
onEnd: (event: MouseEvent) => void,
|
||||
@@ -266,33 +266,32 @@ declare module Snap {
|
||||
undrag(onMove: (dx: number, dy: number, event: MouseEvent) => void,
|
||||
onStart: (x: number, y: number, event: MouseEvent) => void,
|
||||
onEnd: (event: MouseEvent) => void): Snap.Element;
|
||||
undrag(): Snap.Element;
|
||||
}
|
||||
undrag(): Snap.Element;
|
||||
}
|
||||
|
||||
export interface Fragment {
|
||||
//TODO: The documentation says that selectAll returns a set, but the getting started guide
|
||||
// uses .attr on the returned object. That's not supported by a set
|
||||
select(query:string):Snap.Element;
|
||||
selectAll(query ?:string):Snap.Set;
|
||||
}
|
||||
export interface Fragment {
|
||||
//TODO: The documentation says that selectAll returns a set, but the getting started guide
|
||||
// uses .attr on the returned object. That's not supported by a set
|
||||
select(query:string):Snap.Element;
|
||||
selectAll(query ?:string):Snap.Set;
|
||||
}
|
||||
|
||||
export interface Matrix {
|
||||
add(a:number,b:number,c:number,d:number,e:number,f:number):Matrix;
|
||||
add(matrix:Matrix):Matrix;
|
||||
clone():Matrix;
|
||||
determinant():number;
|
||||
invert():Matrix;
|
||||
rotate(a:number,x?:number,y?:number):Matrix;
|
||||
scale(x:number,y?:number,cx?:number,cy?:number):Matrix;
|
||||
split():ExplicitTransform;
|
||||
toTransformString():string;
|
||||
translate(x:number,y:number):Matrix;
|
||||
x(x:number,y:number):number;
|
||||
y(x:number,y:number):number;
|
||||
export interface Matrix {
|
||||
add(a:number,b:number,c:number,d:number,e:number,f:number):Matrix;
|
||||
add(matrix:Matrix):Matrix;
|
||||
clone():Matrix;
|
||||
determinant():number;
|
||||
invert():Matrix;
|
||||
rotate(a:number,x?:number,y?:number):Matrix;
|
||||
scale(x:number,y?:number,cx?:number,cy?:number):Matrix;
|
||||
split():ExplicitTransform;
|
||||
toTransformString():string;
|
||||
translate(x:number,y:number):Matrix;
|
||||
x(x:number,y:number):number;
|
||||
y(x:number,y:number):number;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
interface ExplicitTransform {
|
||||
interface ExplicitTransform {
|
||||
dx: number;
|
||||
dy: number;
|
||||
scalex: number;
|
||||
@@ -302,94 +301,94 @@ declare module Snap {
|
||||
isSimple: boolean;
|
||||
}
|
||||
|
||||
interface Paper extends Snap.Element {
|
||||
clear():void;
|
||||
el(name:string, attr:Object):Snap.Element;
|
||||
filter(filstr:string):Snap.Element;
|
||||
gradient(gradient:string):any;
|
||||
g(varargs?:any):any;
|
||||
group(...els:any[]):any;
|
||||
mask(varargs:any):Object;
|
||||
ptrn(x:number,y:number,width:number,height:number,vbx:number,vby:number,vbw:number,vbh:number):Object;
|
||||
svg(x:number,y:number,width:number,height:number,vbx:number,vby:number,vbw:number,vbh:number):Object;
|
||||
toDataUrl(): string;
|
||||
toString():string;
|
||||
use(id?:string):Object;
|
||||
use(id?:Snap.Element):Object;
|
||||
interface Paper extends Snap.Element {
|
||||
clear():void;
|
||||
el(name:string, attr:Object):Snap.Element;
|
||||
filter(filstr:string):Snap.Element;
|
||||
gradient(gradient:string):any;
|
||||
g(varargs?:any):any;
|
||||
group(...els:any[]):any;
|
||||
mask(varargs:any):Object;
|
||||
ptrn(x:number,y:number,width:number,height:number,vbx:number,vby:number,vbw:number,vbh:number):Object;
|
||||
svg(x:number,y:number,width:number,height:number,vbx:number,vby:number,vbw:number,vbh:number):Object;
|
||||
toDataUrl(): string;
|
||||
toString():string;
|
||||
use(id?:string):Object;
|
||||
use(id?:Snap.Element):Object;
|
||||
|
||||
circle(x:number,y:number,r:number):Snap.Element;
|
||||
ellipse(x:number,y:number,rx:number,ry:number):Snap.Element;
|
||||
image(src:string,x:number,y:number,width:number,height:number):Snap.Element;
|
||||
line(x1:number,y1:number,x2:number,y2:number):Snap.Element;
|
||||
path(pathString?:string):Snap.Element;
|
||||
polygon(varargs:any[]):Snap.Element;
|
||||
polyline(varargs:any[]):Snap.Element;
|
||||
rect(x:number,y:number,width:number,height:number,rx?:number,ry?:number):Snap.Element;
|
||||
text(x:number,y:number,text:string|number):Snap.Element;
|
||||
text(x:number,y:number,text:Array<string|number>):Snap.Element;
|
||||
}
|
||||
circle(x:number,y:number,r:number):Snap.Element;
|
||||
ellipse(x:number,y:number,rx:number,ry:number):Snap.Element;
|
||||
image(src:string,x:number,y:number,width:number,height:number):Snap.Element;
|
||||
line(x1:number,y1:number,x2:number,y2:number):Snap.Element;
|
||||
path(pathString?:string):Snap.Element;
|
||||
polygon(varargs:any[]):Snap.Element;
|
||||
polyline(varargs:any[]):Snap.Element;
|
||||
rect(x:number,y:number,width:number,height:number,rx?:number,ry?:number):Snap.Element;
|
||||
text(x:number,y:number,text:string|number):Snap.Element;
|
||||
text(x:number,y:number,text:Array<string|number>):Snap.Element;
|
||||
}
|
||||
|
||||
export interface Set {
|
||||
animate(attrs:{[attr:string]:string|number|boolean|any},duration:number,easing?:(num:number)=>number,callback?:()=>void):Snap.Element;
|
||||
export interface Set {
|
||||
animate(attrs:{[attr:string]:string|number|boolean|any},duration:number,easing?:(num:number)=>number,callback?:()=>void):Snap.Element;
|
||||
animate(...params:Array<{attrs:any,duration:number,easing:(num:number)=>number,callback?:()=>void}>):Snap.Element;
|
||||
attr(params: {[attr:string]:string|number|boolean|any}): Snap.Element;
|
||||
attr(params: {[attr:string]:string|number|boolean|any}): Snap.Element;
|
||||
attr(param: string): string;
|
||||
bind(attr: string, callback: Function): Snap.Set;
|
||||
bind(attr:string,element:Snap.Element):Snap.Set;
|
||||
bind(attr:string,element:Snap.Element,eattr:string):Snap.Set;
|
||||
clear():Snap.Set;
|
||||
exclude(element:Snap.Element):boolean;
|
||||
forEach(callback:Function,thisArg?:Object):Snap.Set;
|
||||
pop():Snap.Element;
|
||||
push(el:Snap.Element):Snap.Element;
|
||||
push(els:Snap.Element[]):Snap.Element;
|
||||
splice(index:number,count:number,insertion?:Object[]):Snap.Element[];
|
||||
}
|
||||
bind(attr:string,element:Snap.Element):Snap.Set;
|
||||
bind(attr:string,element:Snap.Element,eattr:string):Snap.Set;
|
||||
clear():Snap.Set;
|
||||
exclude(element:Snap.Element):boolean;
|
||||
forEach(callback:Function,thisArg?:Object):Snap.Set;
|
||||
pop():Snap.Element;
|
||||
push(el:Snap.Element):Snap.Element;
|
||||
push(els:Snap.Element[]):Snap.Element;
|
||||
splice(index:number,count:number,insertion?:Object[]):Snap.Element[];
|
||||
}
|
||||
|
||||
interface Filter {
|
||||
blur(x:number,y?:number):string;
|
||||
brightness(amount:number):string;
|
||||
contrast(amount:number):string;
|
||||
grayscale(amount:number):string;
|
||||
hueRotate(angle:number):string;
|
||||
invert(amount:number):string;
|
||||
saturate(amount:number):string;
|
||||
sepia(amount:number):string;
|
||||
shadow(dx: number, dy: number, blur: number, color: string, opacity: number): string;
|
||||
interface Filter {
|
||||
blur(x:number,y?:number):string;
|
||||
brightness(amount:number):string;
|
||||
contrast(amount:number):string;
|
||||
grayscale(amount:number):string;
|
||||
hueRotate(angle:number):string;
|
||||
invert(amount:number):string;
|
||||
saturate(amount:number):string;
|
||||
sepia(amount:number):string;
|
||||
shadow(dx: number, dy: number, blur: number, color: string, opacity: number): string;
|
||||
shadow(dx: number, dy: number, color: string, opacity: number): string;
|
||||
shadow(dx: number, dy: number, opacity: number): string;
|
||||
}
|
||||
}
|
||||
|
||||
interface Path {
|
||||
bezierBBox(...args:number[]):BBox;
|
||||
bezierBBox(bez:Array<number>):BBox;
|
||||
findDotsAtSegment(p1x:number,p1y:number,c1x:number,
|
||||
c1y:number,c2x:number,c2y:number,
|
||||
p2x:number,p2y:number,t:number):Object;
|
||||
getBBox(path:string):BBox;
|
||||
getPointAtLength(path:string,length:number):Object;
|
||||
getSubpath(path:string,from:number,to:number):string;
|
||||
getTotalLength(path:string):number;
|
||||
intersection(path1:string,path2:string):Array<IntersectionDot>;
|
||||
isBBoxIntersect(bbox1:BBox,bbox2:BBox):boolean
|
||||
isPointInside(path:string,x:number,y:number):boolean;
|
||||
isPointInsideBBox(bbox:BBox,x:number,y:number):boolean;
|
||||
map(path:string,matrix:Snap.Matrix):string;
|
||||
map(path:string,matrix:Object):string;
|
||||
toAbsolute(path:string):Array<any>;
|
||||
toCubic(pathString:string):Array<any>;
|
||||
toCubic(pathString:Array<string>):Array<any>;
|
||||
toRelative(path:string):Array<any>;
|
||||
}
|
||||
interface Path {
|
||||
bezierBBox(...args:number[]):BBox;
|
||||
bezierBBox(bez:Array<number>):BBox;
|
||||
findDotsAtSegment(p1x:number,p1y:number,c1x:number,
|
||||
c1y:number,c2x:number,c2y:number,
|
||||
p2x:number,p2y:number,t:number):Object;
|
||||
getBBox(path:string):BBox;
|
||||
getPointAtLength(path:string,length:number):Object;
|
||||
getSubpath(path:string,from:number,to:number):string;
|
||||
getTotalLength(path:string):number;
|
||||
intersection(path1:string,path2:string):Array<IntersectionDot>;
|
||||
isBBoxIntersect(bbox1:BBox,bbox2:BBox):boolean
|
||||
isPointInside(path:string,x:number,y:number):boolean;
|
||||
isPointInsideBBox(bbox:BBox,x:number,y:number):boolean;
|
||||
map(path:string,matrix:Snap.Matrix):string;
|
||||
map(path:string,matrix:Object):string;
|
||||
toAbsolute(path:string):Array<any>;
|
||||
toCubic(pathString:string):Array<any>;
|
||||
toCubic(pathString:Array<string>):Array<any>;
|
||||
toRelative(path:string):Array<any>;
|
||||
}
|
||||
|
||||
interface IntersectionDot{
|
||||
x:number,
|
||||
y:number,
|
||||
t1:number,
|
||||
t2:number,
|
||||
segment1:number,
|
||||
segment2:number,
|
||||
bez1:Array<number>,
|
||||
bez2:Array<number>
|
||||
}
|
||||
}
|
||||
interface IntersectionDot{
|
||||
x:number,
|
||||
y:number,
|
||||
t1:number,
|
||||
t2:number,
|
||||
segment1:number,
|
||||
segment2:number,
|
||||
bez1:Array<number>,
|
||||
bez2:Array<number>
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user