snap.js/demos/tutorial/index.html

243 lines
9.3 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tutorial</title>
<link rel="stylesheet" href="../../dist/fonts/stylesheet.css">
<link rel="stylesheet" href="../../dist/css/prism.css">
<style media="screen">
pre.code {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
padding: 10px;
height: 280px;
overflow: auto;
background: #181818;
border: solid 2px #181818;
}
#codelines {
display: none;
}
#svg {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: solid 2px #ccc;
width: 300px;
height: 300px;
float: left;
margin-right: 10px;
font: 1em source-sans-pro, Source Sans Pro, Helvetica, sans-serif;
}
</style>
<script src="../../dist/snap.svg-min.js"></script>
<script src="../../dist/js/prism.js"></script>
<script>
var S;
window.onload = function () {
var s = Snap(850, 35);
function chooser(s, count) {
var loop = "M35,65a30,30,0,0,0,0-60a30,30,0,0,0,0,60",
line = "M35,65a30,30,0,0,0,0-60a30,30,0,0,0,0,60c30,0,60-60,90-60a30,30,0,0,1,0,60a30,30,0,0,1,0-60",
l1 = Snap.path.getTotalLength(loop),
l2 = Snap.path.getTotalLength(line),
cur = 1,
p = s.path({
path: loop,
fill: "none",
stroke: "#f00",
strokeWidth: 6,
strokeLinecap: "round"
});
for (var i = 1; i <= count; i++) {
s.text(90 * i - 55, 49, i).attr({
font: "45px source-sans-pro, Source Sans Pro, Helvetica, sans-serif",
textAnchor: "middle"
});
(function (i) {
s.circle(90 * i - 55, 35, 40).attr({
opacity: 0
}).click(eve.f("tut.click", i - 1));
}(i));
}
s.path("M11.166,23.963L22.359,17.5c1.43-0.824,1.43-2.175,0-3L11.166,8.037c-1.429-0.826-2.598-0.15-2.598,1.5v12.926C8.568,24.113,9.737,24.789,11.166,23.963z").transform("t" + (90 * (count + 1) - 68) + ",18s2");
var but = s.circle(90 * (count + 1) - 55, 35, 30).attr({
fillOpacity: 0,
stroke: "#333",
strokeWidth: 2
});
eve.on("tut.click", function (I) {
p.attr({
path: loop,
transform: "t" + (90 * I) + ",0"
});
cur = I + 1;
});
function frameHandler(frame) {
function anim() {
cur++;
if (cur > count) {
return;
}
if (typeof frame == "function") {
frame(cur);
}
Snap.animate(0, l2 - l1, function (val) {
p.attr({
path: Snap.path.getSubpath(line, val, val + l1)
});
}, 500, function () {
p.attr({
path: loop,
transform: p.transform() + "t90,0"
});
});
}
if (typeof frame == "function") {
but.click(anim);
} else {
anim();
}
}
return frameHandler;
}
var g = s.g();
g.attr({
transform: "s.5,.5,0,0"
});
var str = "",
code = document.getElementById("code");
var domcodelines = document.querySelectorAll("#codelines li"),
codelines = [],
replacers = {},
lines = [],
callback = function (i) {
lines = [];
for (var j = 1; j <= i; j++) {
replacers[j - 1] && lines.pop();
lines.push(codelines[j - 1]);
}
Snap("#svg").clear();
str = lines.join("\n");
eval(str);
code.innerHTML = Prism.highlight(str, Prism.languages.javascript);
code.parentNode.scrollTop = code.parentNode.scrollTopMax || 1e9;
};
for (var i = 0, ii = domcodelines.length; i < ii; i++) {
codelines[i] = domcodelines[i].innerHTML;
if (domcodelines[i].className == "replace") {
replacers[i] = true;
}
}
callback(1);
chooser(g, codelines.length)(callback);
eve.on("tut.click", function (I) {
callback(I + 1);
});
};
</script>
</head>
<body>
<ol id="codelines">
<li>// First, let's create our drawing surface out of an existing SVG element
// If you want to create a new surface just provide dimensions
// like s = Snap(800, 600);
var s = Snap("#svg");</li>
<li>// Let's create a big circle in the middle:
var bigCircle = s.circle(150, 150, 100);
// By default it is black, let's change its attributes</li>
<li>bigCircle.attr({
fill: "#bada55",
stroke: "#000",
strokeWidth: 5
});</li>
<li>// Now let's create another small circle:
var smallCircle = s.circle(100, 150, 70);</li>
<li>// Let's put this small circle and another one into a group:
var discs = s.group(smallCircle, s.circle(200, 150, 70));</li>
<li>// Now we can change attributes for the whole group
discs.attr({
fill: "#fff"
});</li>
<li>// Now more interesting stuff
// Let's assign this group as a mask for our big circle
bigCircle.attr({
mask: discs
});</li>
<li>// Despite our small circle being part of a group
// and part of a mask we can still access it:
smallCircle.animate({r: 50}, 1000);</li>
<li>// We dont have a reference for second small circle,
// but we can easily grab it with CSS selectors:
discs.select("circle:nth-child(2)").animate({r: 50}, 1000);</li>
<li>// Now let's create pattern
var p = s.path("M10-5-10,15M15,0,0,15M0-5-20,15").attr({
fill: "none",
stroke: "#bada55",
strokeWidth: 5
});
// To create a pattern,
// just specify dimensions in the pattern method:
p = p.pattern(0, 0, 10, 10);
// Then use it as a fill on the big circle
bigCircle.attr({
fill: p
});</li>
<li>// We can also grab a pattern from an SVG
// already embedded into our page
discs.attr({
fill: Snap("#pattern")
});</li>
<li>// Let's change the fill of the circles to gradient
// This string means relative radial gradient
// from white to black
discs.attr({fill: "r()#fff-#000"});
// Note that we have two gradients, one for each circle</li>
<li>// If we want them to share one gradient,
// we need to use an absolute gradient with capital R
discs.attr({fill: "R(150, 150, 100)#fff-#000"});</li>
<li>// Of course we can animate color as well
p.select("path").animate({stroke: "#f00"}, 1000);</li>
<li>// Now let's load an external SVG file:
Snap.load("mascot.svg", function (f) {
// Note that we traverse and change attr before the SVG
// is even added to the page
f.select("polygon[fill='#09B39C']").attr({fill: "#bada55"});
g = f.select("g");
s.append(g);
// Making croc draggable. Go ahead drag it around!
g.drag();
// Obviously drag could take event handlers too
// Looks like our croc is made from more than one polygon...
});</li>
<li class="replace">// Now let's load an external SVG file:
Snap.load("mascot.svg", function (f) {
// Note that we traverse and change attr before SVG
// is even added to the page
f.selectAll("polygon[fill='#09B39C']").attr({fill: "#bada55"});
g = f.select("g");
s.append(g);
// Making croc draggable. Go ahead drag it around!
g.drag();
// Obviously drag could take event handlers too
// Thats better! selectAll for the rescue.
});</li>
<li>// Writing text is as simple as:
s.text(200, 100, "Snap.svg");</li>
<li>// Provide an array of strings (or arrays), to generate tspans
var t = s.text(200, 120, ["Snap", ".", "svg"]);
t.selectAll("tspan:nth-child(3)").attr({
fill: "#900",
"font-size": "20px"
});</li>
</ol>
<svg id="svg"></svg>
<pre class="javascript code"><code data-language="javascript" class="language-javascript" id="code"></code></pre>
<svg width="0" height="0">
<pattern id="pattern" patternUnits="userSpaceOnUse" x="0" y="0" width="10" height="10" viewBox="0 0 10 10">
<path d="M-5,0,10,15M0-5,15,10" stroke="white" stroke-width="5"/>
</pattern>
</svg>
</body>
</html>