Two more design tutorials.
Dmitry Baranovskiy
parent
b92dcb5af5
commit
8c5eb95c50
|
|
@ -0,0 +1,202 @@
|
|||
<!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 with mask
|
||||
// Lets connect mask and circle together. Also useful if we have a path
|
||||
// and can’t calculate offset easily.
|
||||
var s = Snap("#svg");
|
||||
// So, lets start with an empty circle.
|
||||
// It’s important that it will not have any attributes set
|
||||
var bigCircle = s.circle(150, 150, 100);</li>
|
||||
<li>//-----------------------------------------------------
|
||||
// Lets use it again for patterned fill
|
||||
var c1 = bigCircle.use();
|
||||
// Create pattern
|
||||
var p = s.path("M110,95,95,110M115,100,100,115").attr({
|
||||
fill: "none",
|
||||
stroke: "#bada55",
|
||||
strokeWidth: 4
|
||||
});
|
||||
var ptrn = p.pattern(100, 100, 10, 10);
|
||||
// and apply some nice attributes
|
||||
c1.attr({
|
||||
fill: ptrn
|
||||
});</li>
|
||||
<li>//-----------------------------------------------------
|
||||
// Lets use it for stroke
|
||||
var c2 = bigCircle.use();
|
||||
c2.attr({
|
||||
fill: "none",
|
||||
stroke: "#000",
|
||||
strokeWidth: 6
|
||||
});</li>
|
||||
<li>// Lets create a masking circle</li>
|
||||
<li>var ring = bigCircle.use();
|
||||
ring.attr({
|
||||
fill: "none",
|
||||
stroke: "#000",
|
||||
strokeWidth: 20 // we need only inner 10px of it
|
||||
});</li>
|
||||
<li>// Hide bigCircle by moving it to <defs>
|
||||
bigCircle.toDefs();</li>
|
||||
<li>var mask = s.mask();</li>
|
||||
<li>// Background rect:
|
||||
mask.add(s.rect(0, 0, "100%", "100%").attr({fill: "#fff"}));</li>
|
||||
<li>// and our ring
|
||||
mask.add(ring);</li>
|
||||
<li>c1.attr({
|
||||
mask: mask
|
||||
});</li>
|
||||
<li>//Now, let’s animate bigCircle:</li>
|
||||
<li>bigCircle.animate({r: 50}, 5e3, mina.elastic);
|
||||
// Despite bigCircle is not visible it affect all 3 “uses” of it.</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>
|
||||
|
|
@ -0,0 +1,180 @@
|
|||
<!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>// Text on the path
|
||||
var s = Snap("#svg");</li>
|
||||
<li>// Setting the background
|
||||
var bg = s.rect(50, 50, 200, 200, 10).attr({fill: "#ccc"});</li>
|
||||
<li>var t = s.text(150, 150, "Test Text").attr({
|
||||
font: "30px Helvetica, sans-serif",
|
||||
textAnchor: "middle",
|
||||
fill: "#ddd"
|
||||
});</li>
|
||||
<li>// Lets create a mask</li>
|
||||
<li>var t2 = t.use().attr({
|
||||
stroke: "#000",
|
||||
strokeWidth: 10,
|
||||
strokeLinecap: "round",
|
||||
strokeLinejoin: "round"
|
||||
});
|
||||
</li>
|
||||
<li>var mask = s.mask();</li>
|
||||
<li>// Background rect:
|
||||
mask.add(s.rect(0, 0, "100%", "100%").attr({fill: "#fff"}));</li>
|
||||
<li>// and our ring
|
||||
mask.add(t2);</li>
|
||||
<li>bg.attr({
|
||||
mask: mask
|
||||
});</li>
|
||||
<li>//Now, let’s animate:</li>
|
||||
<li>t2.animate({strokeWidth: 4}, 5e3, mina.bounce);</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>
|
||||
Loading…
Reference in New Issue