Initial drawing mode with rectangles
This commit is contained in:
Ruben van de Ven
commit
4868a374b6
2 changed files with 208 additions and 0 deletions
78
cursor.svg
Normal file
78
cursor.svg
Normal file
|
|
@ -0,0 +1,78 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
width="30px"
|
||||||
|
height="30px"
|
||||||
|
viewBox="0 0 17.361561 17.361561"
|
||||||
|
version="1.1"
|
||||||
|
id="svg8"
|
||||||
|
inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)"
|
||||||
|
sodipodi:docname="cursor.svg">
|
||||||
|
<defs
|
||||||
|
id="defs2" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="base"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1.0"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:zoom="1.4"
|
||||||
|
inkscape:cx="-63.804742"
|
||||||
|
inkscape:cy="236.83295"
|
||||||
|
inkscape:document-units="mm"
|
||||||
|
inkscape:current-layer="layer1"
|
||||||
|
inkscape:document-rotation="0"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:window-width="3830"
|
||||||
|
inkscape:window-height="2120"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="1" />
|
||||||
|
<metadata
|
||||||
|
id="metadata5">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title></dc:title>
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<g
|
||||||
|
inkscape:label="Layer 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1"
|
||||||
|
transform="translate(-55.526548,-37.644545)">
|
||||||
|
<path
|
||||||
|
sodipodi:type="star"
|
||||||
|
style="fill:#000000;fill-opacity:0.00280121;stroke-width:3;stroke-dashoffset:0.755906"
|
||||||
|
id="path837"
|
||||||
|
sodipodi:sides="8"
|
||||||
|
sodipodi:cx="41.449741"
|
||||||
|
sodipodi:cy="90.504143"
|
||||||
|
sodipodi:r1="96.300034"
|
||||||
|
sodipodi:r2="48.150017"
|
||||||
|
sodipodi:arg1="0.75029607"
|
||||||
|
sodipodi:arg2="1.1429952"
|
||||||
|
inkscape:flatsided="false"
|
||||||
|
inkscape:rounded="0"
|
||||||
|
inkscape:randomized="0"
|
||||||
|
d="M 111.89197,156.16684 61.425792,134.31489 44.82938,186.74485 24.596066,135.60822 -24.212953,160.94637 -2.3610054,110.48019 -54.79097,93.883781 -3.6543354,73.650467 -28.992484,24.841449 21.473691,46.693396 38.070103,-5.7365685 58.303417,45.400066 107.11244,20.061918 85.260488,70.528093 137.69045,87.124504 86.553818,107.35782 Z"
|
||||||
|
inkscape:transform-center-y="-1.1402097e-06" />
|
||||||
|
<circle
|
||||||
|
style="fill:none;fill-opacity:1;stroke:#f0e68c;stroke-width:3;stroke-dashoffset:0.755906"
|
||||||
|
id="path867"
|
||||||
|
cx="64.207329"
|
||||||
|
cy="46.325325"
|
||||||
|
r="7.1807804" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.6 KiB |
130
index.html
Normal file
130
index.html
Normal file
|
|
@ -0,0 +1,130 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Auto accept</title>
|
||||||
|
<style type='text/css'>
|
||||||
|
body{
|
||||||
|
margin:0;
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: url('./cursor.svg') 15 15, crosshair;
|
||||||
|
}
|
||||||
|
svg{
|
||||||
|
width:100vw;
|
||||||
|
height:100vh;
|
||||||
|
}
|
||||||
|
svg rect{
|
||||||
|
stroke: red;
|
||||||
|
stroke-width: .2cm;
|
||||||
|
fill: none;
|
||||||
|
transition: stroke .5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg rect.locked{
|
||||||
|
stroke:blue;
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity .5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg rect.hide{
|
||||||
|
opacity:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#crosshair line{
|
||||||
|
stroke: gray;
|
||||||
|
stroke-dasharray: 5px 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#video_background{
|
||||||
|
position: absolute;
|
||||||
|
top:0;
|
||||||
|
left:0;
|
||||||
|
bottom:0;
|
||||||
|
right:0;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<svg id='canvas' viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g id='crosshair'>
|
||||||
|
<line id='crosshair_x' x1="0" y1="0" x2="0" y2="100%" />
|
||||||
|
<line id='crosshair_y' x1="0" y1="0" x2="100%" y2="0" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
<video id="video_background" autoplay loop>
|
||||||
|
<source src="Blue_Sky_and_Clouds_Timelapse_0892__Videvo.mov">
|
||||||
|
</video>
|
||||||
|
<script>
|
||||||
|
let svgEl = document.getElementById('canvas');
|
||||||
|
let crosshairXEl = document.getElementById('crosshair_x');
|
||||||
|
let crosshairYEl = document.getElementById('crosshair_y');
|
||||||
|
|
||||||
|
|
||||||
|
// canvas position relative to mouse/screen
|
||||||
|
// TODO: update on resize:
|
||||||
|
svgEl.setAttribute('viewBox', '0 0 '+window.innerWidth+' '+window.innerHeight);
|
||||||
|
let rect = svgEl.getBoundingClientRect();
|
||||||
|
let cx = rect.left + rect.width/2;
|
||||||
|
let cy = rect.top + rect.height/2;
|
||||||
|
let center = {'x': cx, 'y': cy};
|
||||||
|
|
||||||
|
// move crosshairs
|
||||||
|
window.addEventListener('mousemove', function(mousemoveEv){
|
||||||
|
let x = mousemoveEv.clientX - rect.left;
|
||||||
|
let y = mousemoveEv.clientY - rect.top;
|
||||||
|
|
||||||
|
crosshairXEl.setAttribute('x1', x)
|
||||||
|
crosshairXEl.setAttribute('x2', x)
|
||||||
|
crosshairYEl.setAttribute('y1', y)
|
||||||
|
crosshairYEl.setAttribute('y2', y)
|
||||||
|
});
|
||||||
|
|
||||||
|
svgEl.addEventListener('mousedown', function(mousedownEv){
|
||||||
|
|
||||||
|
|
||||||
|
let shapeEl = document.createElementNS('http://www.w3.org/2000/svg','rect');
|
||||||
|
shapeEl.classList.add('rect');
|
||||||
|
let p1 = {'x': mousedownEv.clientX - rect.left, 'y': mousedownEv.clientY - rect.top}
|
||||||
|
shapeEl.setAttribute('x', p1.x);
|
||||||
|
shapeEl.setAttribute('y', p1.y);
|
||||||
|
|
||||||
|
shapeEl.setAttribute('width', 0);
|
||||||
|
shapeEl.setAttribute('height', 0);
|
||||||
|
|
||||||
|
svgEl.appendChild(shapeEl);
|
||||||
|
|
||||||
|
let mouseMoveEv = function(mousemoveEv) {
|
||||||
|
let p2 = {'x': mousemoveEv.clientX - rect.left, 'y': mousemoveEv.clientY - rect.top}
|
||||||
|
// draw inbetween p1 & p2.
|
||||||
|
let minx = Math.min(p1.x, p2.x);
|
||||||
|
let miny = Math.min(p1.y, p2.y);
|
||||||
|
let maxx = Math.max(p1.x, p2.x);
|
||||||
|
let maxy = Math.max(p1.y, p2.y);
|
||||||
|
|
||||||
|
shapeEl.setAttribute('x', minx);
|
||||||
|
shapeEl.setAttribute('y', miny);
|
||||||
|
shapeEl.setAttribute('width', maxx - minx);
|
||||||
|
shapeEl.setAttribute('height', maxy - miny);
|
||||||
|
};
|
||||||
|
let mouseUpEv = function() {
|
||||||
|
console.log('up');
|
||||||
|
window.removeEventListener('mousemove', mouseMoveEv); // remove itself.
|
||||||
|
window.removeEventListener('mouseup', mouseUpEv); // remove itself.
|
||||||
|
shapeEl.classList.add('locked');
|
||||||
|
//TODO: calculate points
|
||||||
|
|
||||||
|
setTimeout(function(){
|
||||||
|
shapeEl.classList.add('hide');
|
||||||
|
setTimeout(function(){
|
||||||
|
shapeEl.parentNode.removeChild(shapeEl);
|
||||||
|
},1000);
|
||||||
|
}, 1000);
|
||||||
|
};
|
||||||
|
window.addEventListener('mousemove', mouseMoveEv);
|
||||||
|
window.addEventListener('mouseup', mouseUpEv);
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in a new issue