snap.js/demos/tutorial/1.html

180 lines
6.9 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tutorial</title>
<link rel="stylesheet" href="../../doc/fonts/stylesheet.css">
<link rel="stylesheet" href="../../doc/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="../../doc/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>// Simple dashed pattern on circle
var s = Snap("#svg");</li>
<li>// This will be our shape. It could be anything.
var bigCircle = s.circle(150, 150, 100);</li>
<li>bigCircle.attr({
stroke: "#000",
strokeWidth: 5
});</li>
<li>// Now let's create pattern
var p = s.path("M110,95,95,110M115,100,100,115").attr({
fill: "none",
stroke: "#bada55",
strokeWidth: 4
});
</li>
<li>//This is where our pattern cut will happen:
var cut = s.rect(100, 100, 10, 10).attr({fill: "#fff", opacity: .5})</li>
<li>cut.remove();</li>
<li>//make it a pattern
var ptrn = p.pattern(100, 100, 10, 10);
//ptrn is an invisible &lt;pattern> element.</li>
<li>// Then use it as a fill on the big circle
bigCircle.attr({
fill: ptrn
});</li>
<li>//We still have access to original path for the pattern, lets animate it a bit:</li>
<li>p.animate({strokeWidth: 1, stroke: "#FF4136"}, 1e3);
//Note that pattern could have as many elements as you want</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>