Initial drawing mode with rectangles
This commit is contained in:
Ruben van de Ven
commit
4868a374b6
|
|
@ -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 |
|
|
@ -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 New Issue