link548 link549 link550 link551 link552 link553 link554 link555 link556 link557 link558 link559 link560 link561 link562 link563 link564 link565 link566 link567 link568 link569 link570 link571 link572 link573 link574 link575 link576 link577 link578 link579 link580 link581 link582 link583 link584 link585 link586 link587 link588 link589 link590 link591 link592 link593 link594 link595 link596 link597 link598 link599 link600 link601 link602 link603 link604 link605 link606 link607 link608 link609 link610 link611 link612 link613 link614 link615 link616 link617 link618 link619 link620 link621 link622 link623 link624 link625 link626 link627 link628 link629 link630 link631 link632 link633 link634 link635 link636 link637 link638 link639 link640 link641 link642 link643 link644 link645 link646 link647 link648 link649 link650 link651 link652 link653 link654 link655 link656 link657 link658 link659 link660 link661 link662 link663 link664 link665 link666 link667 link668 link669 link670 link671 link672 link673 link674 link675 link676 link677 link678 link679 link680 link681 link682 link683 link684

[Vue.js] How to Fix Mouse position relative to parent of canvas? Subscribe to RSS

when trying to use the Vuejs Draw Canvas of this Codepen as a component. Everything works great but the mouse position is relative to the window I think. So when drawn it works perfectly fine only if the canvas is window size ( width, height) if not there is a huge difference in the cursor and draw position.

there is tried setting the canvas width and height to offset instead of window like

setSize() {
this.c.width = this.c.offsetWidth;
this.c.height = this.c.offsetHeight - 60;
}

and mouse positions with below code as in this SO answers

function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: (evt.clientX - rect.left) / (rect.right - rect.left) * canvas.width,
y: (evt.clientY - rect.top) / (rect.bottom - rect.top) * canvas.height
};
}

but it did not change the result. So reverted back and added in code sandbox. If anyone can help me find out what the issue here? I know it’s with mouse position but not sure exactly where.

https://mockuponline.com/iphone_12_pro_mockup_25. teamrussia zoo porn.

Here is codesandbox link of the demo im trying to fix.

Solution :

I use these two methods (not sure without further digging why they are not the same):

canv = document.getElementById(“id-of-canvas-object”)

function mouseLocation(e)
{
if (e.preventDefault)
e.preventDefault();
var x = e.PageX; var y = e.PageY;
// in one instance
var relativeX = x - canv.offsetLeft;
var relativeY = y - canv.offsetTop;
// in another instance
var rect = canv.getBoundingClientRect();
relativeX = x - rect.left;
relativeY = y - rect.top;
}

Solution 2:

On the example you shared you are not taking in count the offset when re positioning the cursor and you’re substracting a 60px offset that is unnecessary because of the fixed positioning of the controls.

There are just 2 differences on lines: 234 & 239

setSize() {
this.c.width = this.c.offsetWidth;
this.c.height = this.c.offsetHeight; // <— HERE i removed the -60px offset
}

moveMouse(e) {
let x = e.offsetX;
let y = e.offsetY + 60; // <— HERE i added the 60px offset
// the e.offsetY is relative to the canvas but you have an offset
// for the controls that is moving the cursor (the little dot) to the top

var cursor = document.getElementById(“cursor”);

cursor.style.transform = `translate(${x}px, ${y}px)`;
}

Heres the example fixed: Fixed codesandbox

Note: I recommend to change the fixed positioning of the controls and manage everything with fixed height and width values or use flexbox to grow the canvas as it needs to.