graphics-violin.mustache revision dd68f827968d5a55f4656a413c8af8b1c032d08f
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein<style scoped>
c92c50783e4e93699f2a42643b8f200b9b719c87Automatic Updater#custom-doc { width: 95%; min-width: 950px; }
75c0816e8295e180f4bc7f10db3d0d880383bc1cMark Andrews#pagetitle {background-image: url(../../assets/bg_hd.gif);}
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein#outerframe {
4a14ce5ba00ab7bc55c99ffdcf59c7a4ab902721Automatic Updater display: inline-block;
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein height: 446px;
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein width: 714px;
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein}
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein#mygraphiccontainer {
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein display: inline-block;
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein top: 100px;
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein width: 614px;
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein top: 15px;
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein left: 34px;
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein position: relative;
ea94d370123a5892f6c47a97f21d1b28d44bb168Tinderbox User}
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein.fuzzy{
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein opacity:0.2;
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein filter:alpha(opacity=20);
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein}
e21a2904f02a03fa06b6db04d348f65fe9c67b2bMark Andrews</style>
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein<div class="intro">
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob AusteinThis example shows how to use the `Graphics` to draw the head of a violin.
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein</div>
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein<div class="example">
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein{{>graphics-violin-source}}
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein</div>
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein<h2>HTML</h2>
71c66a876ecca77923638d3f94cc0783152b2f03Mark Andrews```
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein<div id="#outerframe">
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein <div id="mygraphiccontainer"></div>
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein</div>
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein```
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein<h2>CSS</h2>
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein```
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein#outerframe {
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein display: inline-block;
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein height: 446px;
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein width: 714px;
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein}
71c66a876ecca77923638d3f94cc0783152b2f03Mark Andrews
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein#mygraphiccontainer {
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein display: inline-block;
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein top: 100px;
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein width: 614px;
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein top: 15px;
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein left: 34px;
ea94d370123a5892f6c47a97f21d1b28d44bb168Tinderbox User position: relative;
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein}
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein.fuzzy{
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein opacity:0.2;
ea94d370123a5892f6c47a97f21d1b28d44bb168Tinderbox User filter:alpha(opacity=20);
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein}
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein```
ea94d370123a5892f6c47a97f21d1b28d44bb168Tinderbox User
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein<h2>Complete Example Source</h2>
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein```
ea94d370123a5892f6c47a97f21d1b28d44bb168Tinderbox User{{>graphics-violin-source}}
ea94d370123a5892f6c47a97f21d1b28d44bb168Tinderbox User```
60e5e10f8d2e2b0c41e8abad38cacd867caa6ab2Rob Austein