Showing Drawing lines with JavaScript - javascript

im trying to get the line drawing to show on first click. So you are able to see where the line will end on second click. At the moment you cant see the line until you click a second point but i cant work out what im missing so that the line shows up on the first click and it carries on displaying until the second click.
$(function() {
var x1 = null,
y1 = null;
var offsetX = 0,
offsetY = 0;
function createLine(x1, y1, x2, y2) {
var length = Math.sqrt(((x1 - x2) * (x1 - x2)) + ((y1 - y2) * (y1 - y2)));
var angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
var transform = 'rotate(' + angle + 'deg)';
offsetX = (x1 > x2) ? x2 : x1;
offsetY = (y1 > y2) ? y2 : y1;
var line = $('<div>')
.appendTo('#demo')
.addClass('line')
.css({
'position': 'absolute',
'-webkit-transform': transform,
'-moz-transform': transform,
'transform': transform
})
.width(length)
.offset({
left: offsetX,
top: offsetY
});
return line;
}
$('#demo').click(function(event) {
var x = event.pageX,
y = event.pageY;
if (x1 == null) {
x1 = x;
y1 = y;
} else {
createLine(x1, y1, x, y);
x1 = y1 = null;
}
})
.delegate('.line', 'click', function(event) {
event.preventDefault();
$(this).toggleClass('active');
x1 = y1 = null;
return false;
});
});
div.line {
transform-origin: 0 100%;
height: 3px;
/* Line width of 3 */
background: #000;
/* Black fill */
}
#demo {
border: 1px dashed #ccc;
height: 400px;
}
div.transforming-on-corner {
transform-origin: 0% 0%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3> click two point to draw a line :</h3>
<div id="demo" class="wide">
</div>

One thing you can do is draw a unique line on the $('#demo').mousemove event after your first click. On each move remove that line by referencing its id (ex: #moveLine) and draw the new one at your mouse position. Once you click to draw a new line it will clear the id of the old line so it becomes permanent.
$(function() {
var x1 = null,
y1 = null;
var offsetX = 0,
offsetY = 0;
var moveLineId = "moveLine";
function createLine(x1, y1, x2, y2, id) {
var length = Math.sqrt(((x1 - x2) * (x1 - x2)) + ((y1 - y2) * (y1 - y2)));
var angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
var transform = 'rotate(' + angle + 'deg)';
offsetX = (x1 > x2) ? x2 : x1;
offsetY = (y1 > y2) ? y2 : y1;
var line = $('<div>')
.appendTo('#demo')
.addClass('line')
.css({
'position': 'absolute',
'-webkit-transform': transform,
'-moz-transform': transform,
'transform': transform
})
.width(length)
.offset({
left: offsetX,
top: offsetY
});
if(id != null) line.attr('id', id);
return line;
}
$('#demo').click(function(event) {
$(".line").removeAttr('id');
var x = event.pageX,
y = event.pageY;
if (x1 == null) {
x1 = x;
y1 = y;
} else {
x1 = y1 = null;
}
})
.delegate('.line', 'click', function(event) {
event.preventDefault();
$(this).toggleClass('active');
x1 = y1 = null;
return false;
});
$('#demo').mousemove(function(event) {
var x = event.pageX,
y = event.pageY;
if (x1 != null) {
$("#" + moveLineId).remove();
createLine(x1, y1, x, y, moveLineId)
} else {
x1 = y1 = null;
}
})
});
div.line {
transform-origin: 0 100%;
height: 3px;
/* Line width of 3 */
background: #000;
/* Black fill */
}
#demo {
border: 1px dashed #ccc;
height: 400px;
}
div.transforming-on-corner {
transform-origin: 0% 0%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3> click two point to draw a line :</h3>
<div id="demo" class="wide">
</div>

Related

Drawing a path between points in javascript/react/css

I am trying to draw a path between points wihtout using canvas or any other librares.
Everything works fine for positive degrees, but it doesn't for negative..
My "points" are 150x150 [px], that's why there is that +75px in left position.
This is my code:
useEffect(() => {
let x1 = spider1.x;
let y1 = spider1.y;
let x2 = spider2.x;
let y2 = spider2.y;
if (x1 > x2) {
let xTmp = x1;
let yTmp = y1;
x1 = x2;
y1 = y2;
x2 = xTmp;
y2 = yTmp;
}
if (x1 === x2) {
const height = Math.abs(y2 - y1).toString();
setStyle({
width: '5px',
left: (x1 + 75).toString() + 'px',
top: `${Math.min(y1, y2) + 75}px`,
height: `${height}px`,
transform: 'rotate(0deg)'
});
} else {
const a = (y2 - y1) / (x2 - x1);
const radians = Math.atan(a);
const degrees = radians * (180 / Math.PI);
setStyle({
width: `${Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1))}px`,
left: (x1 + 75).toString() + 'px',
top: `${Math.min(y1, y2) + 75}px`,
height: `5px`,
transform: `rotate(${degrees}deg)`,
transformOrigin: `${degrees > 0 ? '0% 0%' : '100% 100%'}`
});
}
}, [spider1, spider2]);
return <div className='net' style={style} ref={myRef}></div>;
And the net class:
.net {
position: absolute;
background-color: red;
z-index: 90;
}
On the screens we have the same objects, but the degrees on the second one are "-" and the line doesn't connect that two squares because of that
This example works. You will have to compare yours with mine as to what the differences are.
Note: I just wrote it from scratch rather using your example.
Just click "Random position"
var button = document.getElementById("new-points");
button.onclick = function() {
var xy1 = {
m_x : Math.floor((Math.random() * 200) + 1),
m_y : Math.floor((Math.random() * 200) + 1),
};
var xy2 = {
m_x : Math.floor((Math.random() * 200) + 1),
m_y : Math.floor((Math.random() * 200) + 1),
};
var dotA = document.getElementById("dotA");
dotA.style.left = (xy1.m_x - 5) + "px";
dotA.style.top = (xy1.m_y - 5) + "px";
var dotB = document.getElementById("dotB");
dotB.style.left = (xy2.m_x - 5) + "px";
dotB.style.top = (xy2.m_y - 5) + "px";
var line = document.getElementById("line");
var distance = Math.hypot(xy2.m_x - xy1.m_x, xy2.m_y - xy1.m_y);
line.style.width = distance + "px";
line.style.left = xy1.m_x + "px";
line.style.top = xy1.m_y + "px";
var angle = ((Math.atan2(xy1.m_x - xy2.m_x, xy2.m_y - xy1.m_y) + (Math.PI / 2.0)) * 180 / Math.PI);
line.style.transform = "rotate(" + angle + "deg)";
line.style.display = "block";
}
#new-points {
border: 1px solid black;
padding: 5px;
width: 200px;
text-align: center;
}
.dot {
position: absolute;
width: 10px;
height: 10px;
background: blue;
}
#line {
position: absolute;
border-top: solid 1px red;
height: 1px;
max-height: 1px;
transform-origin: 0% 0%;
}
<div id="dotA" class="dot"></div>
<div id="dotB" class="dot"></div>
<div id="line"></div>
<div id="new-points" style="">
Random position
</div>
I've also tried the atan method for the above and it doesn't work. You can try it yourself and see what happens.

Calculate position (X, Y) on cirlcle base on height

I think the title is a little bit confusing so I will try to say it better.
Image you have this code:
#NadrzFrontView:before {
--beginHeight: var(--startHeight);
--endHeight: var(--finishHeight);
animation: 2s fillin ease forwards;
content: "";
position: absolute;
bottom: 0;
width: 300px;
height: 0;
background-color: #00FFF5;
display: inline-block;
}
#NadrzFrontView {
width: 300px;
height: 300px;
border-radius: 50%;
border: 3px solid black;
position: relative;
overflow: hidden;
}
<div id="NadrzFrontView" style="--startHeight: 0%; --finishHeight: 50%;"> </div>
It looks like this:
Now, you can determent left, top position and height of an element using this script:
function getOffset(el) {
var rect = el.getBoundingClientRect();
return {
left: rect.left + window.pageXOffset,
top: rect.top + window.pageYOffset,
width: rect.width || el.offsetWidth,
height: rect.height || el.offsetHeight
};
}
Ok, when we are able to find these then we go to our problem:
function SomeFunction() {
var thickness = 1;
var color = '#000000';
var off_nadrz = getOffset(document.getElementById('NadrzFrontView'));
var elem = document.getElementById('NadrzFrontView');
var pseudoStyle = window.getComputedStyle(elem, ':before');
var off_pseudo_elem = getOffset(elem);
off_pseudo_elem.top += parseInt(pseudoStyle.top, 10);
off_pseudo_elem.left += parseInt(pseudoStyle.left, 10);
off_pseudo_elem.height = parseInt(pseudoStyle.height, 10);
//finding middle of the circle
var x1 = off_nadrz.left + (off_nadrz.width / 2);
var y1 = off_nadrz.top + (off_nadrz.height / 2);
//draw point in the middle of circle
document.getElementById("AllLines").innerHTML += CreateHtmlPoint(color, x1, y1);
//fincding point on the side of an element
var x2; //I need to find this -- see more in examples
var y2; //I need to find this -- see more in examples
document.getElementById("AllLines").innerHTML += CreateHtmlPoint(color, x2, y2); //This does not work
}
function CreateHtmlPoint(color, cx, cy) {
cx -= 5; // - 5, because width of point is 10
cy -= 5; // - 5, because height of point is 10
return "<div style='padding:0px; z-index: 2; margin:0px; height: 10px; width: 10px; background-color:" + color + "; line-height:1px; position:absolute; left:" + cx + "px; top:" + cy + "px; border-radius: 50%;' />";
}
So, now example of an x2 and y2 would look like this:
Basically, we know on what coordinades is top of circle (off_nadrz.top), bottom of circle (off_nadrz.top + (off_nadrz.height / 2)) and height of an circle (off_nadrz.height). We also know same things of an psuedo_element (blue thing in the circle). From this we need to calculate x2 and y2.
Thanks for every suggestion because I am fighting with this problem for 2 days now...
you have only to apply the circumference formula:
var y2 = y1 - ( off_pseudo_elem.height - off_nadrz.height / 2 );
once you have y2, calculate x2:
var r = off_nadrz.height / 2; // if the figure is a circle, not an ellipse
var x2 = x1 + Math.sqrt( r * r - ( y2 - y1 ) * ( y2 - y1 ) );

Clear HTML page without a canvas

I am wondering if there was any way to clear an HTML page without using a canvas.
I am attempting to make a simple program using JavaScript without a canvas, which draws a line from the center of the window to wherever your mouse is pointing. I can successfully draw a new line whenever and wherever the mouse is moving, but do not know how to clear the page without making a canvas and using clearRect().
Is there any way to clear the page without a canvas?
Just in case anyone finds it helpful, here is my code:
window.addEventListener('mousemove', function (e){
linedraw(window.innerWidth/2, window.innerHeight/2, e.x, e.y)
});
function linedraw(x1, y1, x2, y2) {
if (x2 < x1) {
tmp = x2 ; x2 = x1 ; x1 = tmp
tmp = y2 ; y2 = y1 ; y1 = tmp
}
lineLength = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
m = (y2 - y1) / (x2 - x1)
degree = Math.atan(m) * 180 / Math.PI
document.body.innerHTML += "<div class='line' style='transform-origin: top left; transform: rotate(" + degree + "deg); width: " + lineLength + "px; height: 1px; background: black; position: absolute; top: " + y1 + "px; left: " + x1 + "px;'></div>"
}
Instead of appending a new div, just replace the html on every mouse move.
window.addEventListener('mousemove', function (e){
linedraw(window.innerWidth/2, window.innerHeight/2, e.x, e.y)
});
function linedraw(x1, y1, x2, y2) {
if (x2 < x1) {
tmp = x2 ; x2 = x1 ; x1 = tmp
tmp = y2 ; y2 = y1 ; y1 = tmp
}
lineLength = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
m = (y2 - y1) / (x2 - x1)
degree = Math.atan(m) * 180 / Math.PI
// `document.body.innerHTML = ` instead of `document.body.innerHTML += `
document.body.innerHTML = "<div class='line' style='transform-origin: top left; transform: rotate(" + degree + "deg); width: " + lineLength + "px; height: 1px; background: black; position: absolute; top: " + y1 + "px; left: " + x1 + "px;'></div>"
}

Drawing lines JavaScript - Click Issue

Im having issues with this code created. The problem im having is when i click to stop the line from drawing its has a 50% chance it will work first time However It only seems work correctly if you are doing straight lines only, but i want it to work from any direction and im not 100% sure why its not working line that.
(Im using 1.12.4 jquery as im adding this into WordPress thats what is runs off)
$(function() {
var x1 = null,
y1 = null;
var offsetX = 0,
offsetY = 0;
var moveLineId = "moveLine";
function createLine(x1, y1, x2, y2, id) {
var length = Math.sqrt(((x1 - x2) * (x1 - x2)) + ((y1 - y2) * (y1 - y2)));
var angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
var transform = 'rotate(' + angle + 'deg)';
offsetX = (x1 > x2) ? x2 : x1;
offsetY = (y1 > y2) ? y2 : y1;
var line = $('<div>')
.appendTo('#demo')
.addClass('line')
.css({
'position': 'absolute',
'-webkit-transform': transform,
'-moz-transform': transform,
'transform': transform
})
.width(length)
.offset({
left: offsetX,
top: offsetY
});
if(id != null) line.attr('id', id);
return line;
}
$('#demo').click(function(event) {
$(".line").removeAttr('id');
var x = event.pageX,
y = event.pageY;
if (x1 == null) {
x1 = x;
y1 = y;
} else {
x1 = y1 = null;
}
})
.delegate('.line', 'click', function(event) {
event.preventDefault();
$(this).toggleClass('active');
x1 = y1 = null;
return false;
});
$('#demo').mousemove(function(event) {
var x = event.pageX,
y = event.pageY;
if (x1 != null) {
$("#" + moveLineId).remove();
createLine(x1, y1, x, y, moveLineId)
} else {
x1 = y1 = null;
}
})
});
div.line {
transform-origin: 0 100%;
height: 3px;
/* Line width of 3 */
background: #000;
/* Black fill */
}
#demo {
border: 1px dashed #ccc;
height: 400px;
}
div.transforming-on-corner {
transform-origin: 0% 0%;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<h3> click two point to draw a line :</h3>
<div id="demo" class="wide">
</div>
Instead of click events, listen to mousedown and mouseup events to start / stop drawing the line.
$(function() {
var x1 = null,
y1 = null;
var offsetX = 0,
offsetY = 0;
var moveLineId = "moveLine";
// Use "mousedown" here so the start of a line is registered as soon as you press the mouse button.
$('#demo').on("mousedown", function(event) {
$(".line").removeAttr('id');
var x = event.pageX,
y = event.pageY;
if (x1 == null) {
x1 = x;
y1 = y;
} else {
x1 = y1 = null;
}
})
.delegate('.line', 'mouseup', function(event) {
// Use "mouseup" here so the start of a line is registered as soon as you release the mouse button.
event.preventDefault();
$(this).toggleClass('active');
x1 = y1 = null;
return false;
});
$('#demo').mousemove(function(event) {
var x = event.pageX,
y = event.pageY;
if (x1 != null) {
$("#" + moveLineId).remove();
createLine(x1, y1, x, y, moveLineId)
} else {
x1 = y1 = null;
}
});
function createLine(x1, y1, x2, y2, id) {
var length = Math.sqrt(((x1 - x2) * (x1 - x2)) + ((y1 - y2) * (y1 - y2)));
var angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
var transform = 'rotate(' + angle + 'deg)';
offsetX = (x1 > x2) ? x2 : x1;
offsetY = (y1 > y2) ? y2 : y1;
var line = $('<div>')
.appendTo('#demo')
.addClass('line')
.css({
'position': 'absolute',
'-webkit-transform': transform,
'-moz-transform': transform,
'transform': transform
})
.width(length)
.offset({
left: offsetX,
top: offsetY
});
if (id != null) line.attr('id', id);
return line;
}
});
div.line {
transform-origin: 0 100%;
height: 3px;
background: #000;
}
#demo {
border: 1px dashed #ccc;
height: 400px;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<div id="demo" class="wide"></div>

Drawing multiple lines JavaScript on button click - Not using canvas

I want to find out if it is possible to get multiple drawing lines just like this Fiddle project -
However with out using the canvas, instead using a normal div box with a css background image?
below code using canvas
var canvas = new fabric.Canvas('c', { selection: false });
var line, isDown;
canvas.on('mouse:down', function(o){
isDown = true;
var pointer = canvas.getPointer(o.e);
var points = [ pointer.x, pointer.y, pointer.x, pointer.y ];
line = new fabric.Line(points, {
strokeWidth: 5,
fill: 'red',
stroke: 'red',
originX: 'center',
originY: 'center'
});
canvas.add(line);
});
canvas.on('mouse:move', function(o){
if (!isDown) return;
var pointer = canvas.getPointer(o.e);
line.set({ x2: pointer.x, y2: pointer.y });
canvas.renderAll();
});
canvas.on('mouse:up', function(o){
isDown = false;
});
Thanks
I made some correction to the example to draw in all direction , and that's only with css3 :
Note that you have to define to point (two clicks ) to draw a line .
See below snippet :
$(function() {
var x1 = null,
y1 = null;
var offsetX = 0,
offsetY = 0;
function createLine(x1, y1, x2, y2) {
var length = Math.sqrt(((x1 - x2) * (x1 - x2)) + ((y1 - y2) * (y1 - y2)));
var angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
var transform = 'rotate(' + angle + 'deg)';
offsetX = (x1 > x2) ? x2 : x1;
offsetY = (y1 > y2) ? y2 : y1;
var line = $('<div>')
.appendTo('#demo')
.addClass('line')
.css({
'position': 'absolute',
'-webkit-transform': transform,
'-moz-transform': transform,
'transform': transform
})
.width(length)
.offset({
left: offsetX,
top: offsetY
});
return line;
}
$('#demo').click(function(event) {
var x = event.pageX,
y = event.pageY;
if (x1 == null) {
x1 = x;
y1 = y;
} else {
createLine(x1, y1, x, y);
x1 = y1 = null;
}
})
.delegate('.line', 'click', function(event) {
event.preventDefault();
$(this).toggleClass('active');
x1 = y1 = null;
return false;
});
});
div.line {
transform-origin: 0 100%;
height: 3px;
/* Line width of 3 */
background: #000;
/* Black fill */
}
#demo {
border: 1px dashed #ccc;
height: 400px;
}
div.transforming-on-corner {
transform-origin: 0% 0%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3> click two point to draw a line :</h3>
<div id="demo" class="wide">
</div>

Categories