Merge pull request #1293 from seanhess/svgjs

Added svg.js
2026-09-09 11:13:57 +08:00 · 2013-11-20 09:57:45 -08:00
parent 9f2147f0da fab5ce721c
commit 6c77a1b7d6
2 changed files with 302 additions and 0 deletions
@@ -0,0 +1,69 @@
+/// <reference path='svgjs.d.ts' />
+/// <reference path='../jquery/jquery.d.ts' />
+ 
+// create svg drawing paper
+
+
+// Example from svgjs.com
+function one() {
+    var draw = SVG('canvas')
+
+    // create image
+    var image = draw.image('images/shade.jpg')
+    image.size(600, 600).y(-150)
+
+    // create text
+    var text = draw.text('SVG.JS').move(300, 0)
+    text.font({
+      family: 'Source Sans Pro'
+    , size: 180
+    , anchor: 'middle'
+    , leading: '1em'
+    })
+
+    // clip image with text
+    image.clipWith(text)    
+}
+
+
+// random one I found online
+function two() {
+    var draw = SVG('paper').size(300, 300)
+    var rect = draw.rect(100, 100).attr({ fill: '#f06' })
+    rect.animate().move(150, 150)
+}
+
+
+// Ripped out of a project. 
+function renderSVG(data:string) {
+
+    var el:JQuery;
+
+    var root = SVG(el.get(0))
+
+    // Load the SVG into a container
+    var div = document.createElement("div")
+    var container = SVG(div) // this creates an SVG tag inside
+    container.svg(data) // this creates an SVG inside the SVG
+    var $inner = $(div).find("svg svg")
+    var inner:svgjs.Element = $inner.get(0).instance
+
+    // Copy in the important attributes
+    root.attr('x', inner.attr('x'))
+    root.attr('y', inner.attr('y'))
+    root.attr('width', inner.attr('width'))
+    root.attr('height', inner.attr('height'))
+    root.viewbox(inner.viewbox())
+
+    // Append the children
+    el.append($inner.children())
+
+    // Activate and Label all child paths
+    var index = 0
+    el.find("rect, path, circle, ellipse").each(function() {
+        var $path = $(this)
+        var path = $path.get(0).instance
+        var uniqueId = "path"+index++
+        path.attr({"path-id": uniqueId})
+    })
+}
@@ -0,0 +1,233 @@
+// Type definitions for svg.js
+// Project: http://www.svgjs.com/
+// Definitions by: Sean Hess <https://seanhess.github.io/>
+// Definitions: https://github.com/borisyankov/DefinitelyTyped
+// Reference: http://documentup.com/wout/svg.js
+
+// TODO sets
+// TODO gradients
+
+declare var SVG:svgjs.Library;
+
+declare module svgjs {
+
+    export interface LinkedHTMLElement extends HTMLElement {
+        instance: Element;
+    }
+
+    export interface Library {
+        (selector:string):Doc;
+        (domElement:HTMLElement):Doc;
+        create(name:string):any;
+        Element:ElementStatic;
+        supported:boolean;
+        get(id:string):Element;
+        extend(parent:Object, obj:Object):void;
+    }
+
+    export interface Doc extends Element {
+        svg(data:string):any;
+        pattern(w:number, h:number, add:(e:Element)=>void):Element;
+        
+        defs():Defs;
+
+        use(element:Element):Element;
+
+        clear():void;
+
+        mask():Mask;
+
+        // TODO gradients
+    }    
+
+    export interface Element extends Text, Parent {
+        node:LinkedHTMLElement;
+
+        nested():Doc;
+
+        animate(duration?:number, ease?:string, delay?:number):Animation;
+        animate(info:{ease?:string; duration?:number; delay?:number}):Animation;
+
+        attr(name:string, value:any, namespace?:string):Element;
+        attr(obj:Object):Element;
+        attr(name:string):any;
+        viewbox():Viewbox;
+        viewbox(x:number, y:number, w:number, h:number):Element;
+        viewbox(obj:Viewbox):Element;
+
+        move(x:number, y:number, anchor?:boolean):Element;
+        x(x:number, anchor?:boolean):Element;
+        y(y:number, anchor?:boolean):Element;
+        
+        center(x:number, y:number, anchor?:boolean):Element;
+        cx(x:number, anchor?:boolean):Element;
+        cy(y:number, anchor?:boolean):Element;
+
+        size(w:number, h:number, anchor?:boolean):Element;
+
+        show():Element;
+        hide():Element;
+        visible():boolean;
+        remove():void;
+
+        each(iterator:(i?:number, children?:Element[])=>void, deep?:boolean):void;
+
+        transform(t:Transform):Element;
+        
+        
+        style(name:string, value:string):Element;
+        style(obj:Object):Element;
+        style(name:string):string;
+        style():string;
+        bbox():BBox;
+        rbox():RBox;
+        doc():Doc;
+        data(name:string):any;
+        data(name:string, value:any):Element;
+        remember(name:string, value:any):Element;
+        remember(obj:Object):Element;
+        remember(name:string):any;
+        forget(...keys:string[]):Element;
+
+        fill(fill:{color?:string; opacity?:number}):Element;
+        fill(color:string):Element;
+        fill(pattern:Element):Element;
+        stroke(data:{color?:string; opacity?:number; width?: number}):Element;
+        stroke(color:string):Element;
+        opacity(o:number):Element;
+        rotate(d:number, cx?:number, cy?:number):Element;
+        skew(x:number, y:number):Element;
+        scale(x:number, y:number):Element;
+        translate(x:number, y:number):Element;
+
+        maskWith(element:Element):Element;
+        masker:Element;
+        unmask():Element;
+
+        clipWith(element:Element):Element;
+        clipper:Element;
+        unclip():Element;
+
+        front():Element;
+        back():Element;
+        forward():Element;
+        backward():Element;
+
+        siblings():Element[];
+        position():number;
+        next():Element;
+        previous():Element;
+        before(element:Element):Element;
+        after(element:Element):Element;
+
+
+        click(cb:Function):void;
+        on(event:string, cb:Function):void;
+        off(event:string, cb:Function):void;
+    }
+
+    export interface Mask extends Element {
+        add(element:Element):Mask;
+    }
+
+    export interface Text {
+        content:string;
+        font(font:{family?:string; size?:number; anchor?:string; leading?:string}):Element;
+        tspan(text:string):Element;
+        path(data:string):Element;
+        plot(data:string):Element;
+        track:Element;
+    }
+
+    export interface ElementStatic extends Parent {
+        new(node:any):Element;
+    }
+
+    export interface Defs extends Element {}
+
+
+    export interface Animation {
+        stop():Animation;
+
+        attr(name:string, value:any, namespace?:string):Animation;
+        attr(obj:Object):Animation;
+        attr(name:string):any;
+
+        viewbox(x:number, y:number, w:number, h:number):Animation;
+
+        move(x:number, y:number, anchor?:boolean):Animation;
+        x(x:number, anchor?:boolean):Animation;
+        y(y:number, anchor?:boolean):Animation;
+        
+        center(x:number, y:number, anchor?:boolean):Animation;
+        cx(x:number, anchor?:boolean):Animation;
+        cy(y:number, anchor?:boolean):Animation;
+
+        size(w:number, h:number, anchor?:boolean):Animation;
+        during(cb:(pos:number)=>void):Animation;
+        to(value:number):Animation;
+        after(cb:()=>void):Animation;
+
+        // TODO style, etc, bbox... 
+    }
+    
+    export interface Parent {
+        put(element:Element, i?:number):Element;
+        add(element:Element, i?:number):Element;
+        children:Element[];
+
+        rect(w:number, h:number):Element;
+        ellipse(w:number, h:number):Element;
+        circle(diameter:number):Element;
+        line(x1:number, y1:number, x2:number, y2:number):Element;
+        polyline(data:string):Element;
+        polyline(points:number[][]):Element;
+        polygon(data:string):Element;
+        polygon(points:number[][]):Element;
+        path(data:string):Element;
+        image(url:string, w?:number, h?:number):Element;
+        text(text:string):Element;
+        text(adder:(element:Element)=>void):Element;        
+
+        group():Element;
+    }
+
+    export interface BBox {
+        height:number;
+        width:number;
+        y:number;
+        x:number;
+        cx:number;
+        cy:number;
+        merge(bbox:BBox):BBox;
+    }
+
+    export interface RBox extends BBox {}
+
+    export interface Viewbox {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        zoom?: number;
+    }
+
+    export interface Transform {
+        x?: number;
+        y?: number;
+        rotation?: number;
+        cx?: number;
+        cy?: number;
+        scaleX?: number;
+        scaleY?: number;
+        skewX?: number;
+        skewY?: number;
+        matrix?: string; // 1,0,0,1,0,0
+        a?: number; // direct digits of matrix
+        b?: number;
+        c?: number;
+        d?: number;
+        e?: number;
+        f?: number;
+    }
+}