github/planar-range
1
1
Fork 0
mirror of https://github.com/pshihn/planar-range.git synced 2026-01-10 22:38:05 -05:00
Code Issues Packages Projects Releases Wiki Activity

examples

Browse Source
This commit is contained in:
Preet Shihn
2020-04-19 00:55:59 -07:00
parent 66222854b7
commit 3a653ce41b
3 changed files with 187 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.npmignore
View File

@@ -1,4 +1,5 @@
demo
node_modules
tsconfig.json
bin
bin
examples

116
examples/bezier.html Normal file
View File

@@ -0,0 +1,116 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>planar-range demo</title>
<style>
body {
padding: 60px 32px;
margin: 0;
text-align: center;
background: #fff;
}
#panel {
width: 300px;
height: 300px;
position: relative;
margin: 0 auto;
}
canvas {
position: absolute;
top: 0;
left: 0;
}
planar-range {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
border: 1px solid #000;
}
planar-range-thumb {
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
border: none;
background: #888;
width: 15px;
height: 15px;
}
[name="cp1"],
[name="cp2"] {
background: orange;
}
</style>
</head>
<body>
<div id="panel">
<canvas width="300" height="300"></canvas>
<planar-range>
<planar-range-thumb name="p1" x="0" y="1"></planar-range-thumb>
<planar-range-thumb name="cp1" x="0.15" y="0.15"></planar-range-thumb>
<planar-range-thumb name="cp2" x="0.85" y="0.85"></planar-range-thumb>
<planar-range-thumb name="p2" x="1" y="0"></planar-range-thumb>
</planar-range>
</div>
<script type="module" src="../lib/planar-range.js"></script>
<script type="module">
const range = document.querySelector('planar-range');
const ctx = document.querySelector('canvas').getContext('2d');
const render = () => {
let p1, p2, cp1, cp2;
range.values.forEach((value) => {
switch (value.name) {
case 'p1':
p1 = [value.x * 300, value.y * 300];
break;
case 'p2':
p2 = [value.x * 300, value.y * 300];
break;
case 'cp1':
cp1 = [value.x * 300, value.y * 300];
break;
case 'cp2':
cp2 = [value.x * 300, value.y * 300];
break;
}
});
ctx.clearRect(0, 0, 300, 300);
ctx.lineWidth = 1;
ctx.strokeStyle = 'blue';
ctx.beginPath();
ctx.moveTo(...cp1);
ctx.lineTo(...p1);
ctx.moveTo(...cp2);
ctx.lineTo(...p2);
ctx.stroke();
ctx.lineWidth = 3;
ctx.strokeStyle = 'black';
ctx.beginPath();
ctx.moveTo(...p1);
ctx.bezierCurveTo(...cp1, ...cp2, ...p2);
ctx.stroke();
}
range.addEventListener('change', () => {
requestAnimationFrame(() => render());
});
render();
</script>
</body>
</html>

69
examples/color-picker.html Normal file
View File

@@ -0,0 +1,69 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>planar-range demo</title>
<style>
body {
padding: 60px 32px;
margin: 0;
text-align: center;
}
#panel {
width: 300px;
height: 300px;
background: rgb(255, 0, 0);
position: relative;
margin: 0 auto;
}
planar-range,
#l1,
#l2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
planar-range-thumb {
width: 15px;
height: 15px;
border: 2px solid white;
background: transparent;
}
#l1 {
background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
}
#l2 {
background: linear-gradient(to bottom, transparent 0%, #000 100%);
}
</style>
</head>
<body>
<div id="panel">
<div id="l1"></div>
<div id="l2"></div>
<planar-range>
<planar-range-thumb x="0.5" y="0.5"></planar-range-thumb>
</planar-range>
</div>
<script type="module" src="../lib/planar-range.js"></script>
<script type="module">
const range = document.querySelector('planar-range');
range.addEventListener('change', ({ detail }) => {
document.body.style.background = `hsl(0, ${detail.x * 100}%, ${(1 - detail.y) * 50 + (1 - detail.x) * 50}%)`;
});
</script>
</body>
</html>