gofigure/index.html at master · eoftedal/gofigure · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html>
<head>
<!-- Self-contained bundle (jQuery + Raphaël + gofigure); run `npm run build` first. -->
<script src="dist/gofigure.browser.js"></script>
<!-- Vegur.js registers its font on the global Raphaël exposed by the bundle above. -->
<script src="lib/cufon.js"></script>
<script src="lib/Vegur.js"></script>
<style>
body {
    font-family: arial;
    padding: 20px;
}

#dds { background: url(paper-texture.jpg) 140px 0px no-repeat;
    padding-top: 100px;
    margin-left: -140px;
}

</style>

</head>
<body>
    <h1>gofigure.js - demo</h1>
Click the box. Works best in Chrome.
<div id="dds" style=""></div>
<script>

    // Pass {} for the chalk default or { preset: "marker" }; omit the 4th arg for no filter.
    var figure = gofigure.create('dds', '780', '450', { preset: 'marker' });
    figure.box(600, 50, 100, 200).animate();
    figure.centeredText(650, 270, "A box").animate();

    var steps = [
        figure.arrow(600, 150, 500, 150).centeredText(550, 167, "to"),
        figure.box(400, 50, 100, 200, { radius: 0 }).centeredText(450, 270, "Box with small text", {fontsize: 11}),
        figure.arrow(400, 150, 300, 150, {arrowheads: "end" }).centeredText(350, 167, "single head arrow", {fontsize: 11}),

        figure.centeredText(250, 270, "Slowly drawn box").box(200, 50, 100, 200, {duration: 5000, radius: 25 }),
    ];
    figure.bindClick(steps);

</script>
<a href="https://github.com/eoftedal/gofigure"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>

<!-- The hand-drawn filter is now generated programmatically by gofigure.create(...)'s filter argument. -->


</body>
</html>