Develop Reference

Fabricjs get RGB pixel value after zoom or pan

I'm having trouble getting the correct mouse coordinates on the canvas after preforming pan or zoom.
I have this code for sampling coordinates and RGB:
canvas1.on('mouse:move', function (e) {
//allowing pan only if the image is zoomed.
if (panning && e && e.e) {
var delta = new fabric.Point(e.e.movementX, e.e.movementY);
canvas1.relativePan(delta);
} else {//Read the RGB value of the mouse point
var mouse = canvas1.getPointer(e.e);
var x = parseInt(mouse.x);
var y = parseInt(mouse.y);
// get the color array for the pixel under the mouse
var px = ctx.getImageData(x, y, 1, 1).data;
// report that pixel data
results.innerHTML = 'At [' + x + ' / ' + y + ']: Red/Green/Blue/Alpha = [' + px[0] + ' / ' + px[1] + ' / ' + px[2] + ' / ' + px[3] + ']';
}
});
problem is that after zoom/pan the coordinates are 'wrong',
for example the top left corner in not (0, 0) but (-someX, -someY)...
any help will be appreciated
EDIT: I've found the mistake,
this will fix it. hope it will be useful for someone else
var x = e.e.offsetX;//parseInt(mouse.x);
var y = e.e.offsetY;//parseInt(mouse.y);

This code solves it,
Hope it could be useful for others.
canvas1.on('mouse:move', function (e) {
//allowing pan only if the image is zoomed.
if (panning && e && e.e) {
var delta = new fabric.Point(e.e.movementX, e.e.movementY);
canvas1.relativePan(delta);
} else {//Read the RGB value of the mouse point
var mouse = canvas1.getPointer(e.e);
var x = e.e.offsetX;//parseInt(mouse.x);
var y = e.e.offsetY;//parseInt(mouse.y);
// get the color array for the pixel under the mouse
var px = ctx.getImageData(x, y, 1, 1).data;
// report that pixel data
results.innerHTML = 'At [' + x + ' / ' + y + ']: Red/Green/Blue/Alpha = [' + px[0] + ' / ' + px[1] + ' / ' + px[2] + ' / ' + px[3] + ']';
}
});

IE invalid argument because vars equal NaN

The penultimate line gives an "Invalid argument" error in IE11 - other browsers are fine run the code fine.
var active = $('.interactivemap-minimap-active', this.el);
if (x === undefined) x = self.x;
if (y === undefined) y = self.y;
var width = Math.round(self.container.width() / self.contentWidth / self.scale * this.el.width()),
height = Math.round(self.container.height() / self.contentHeight / self.scale * this.el.height()),
top = Math.round(-y / self.contentHeight / self.scale * this.el.height()),
left = Math.round(-x / self.contentWidth / self.scale * this.el.width()),
right = left + width,
bottom = top + height;
console.log("pass2: width=" + width + ", height=" + height + ", top=" + top + ", left=" + left + ", right=" + right + ", bottom=" + bottom);
active.each(function() {
$(this)[0].style.clip = 'rect(' + top + 'px, ' + right + 'px, ' + bottom + 'px, ' + left + 'px)';
});
the console.log will show:
width=Nan , height=Nan , top=Nan , left=Nan , right=Nan , bottom=Nan
If I comment out the troublesome line, the console.log will show:
width=Nan , height=Nan , top=Nan , left=Nan , right=Nan , bottom=Nan
width=140 , height=162 , top=-1 , left=0 , right=140 , bottom=161
So it looks like it takes a moment to populate those variables with actual data but it starts the last function when the are still equal to Nan and then errors.
Is there any way to get around this?

Mouse position not working for FireFox

I am stuck in an issue. I have to fetch mouse positions on firefox browser. However it is not working may be I am doing any mistake in code. So far I have done is given below.
Javascript Code :
function MousePos(event){
if ($.browser.mozilla == true){
if(typeof event.offsetX === "undefined" || typeof event.offsetY === "undefined"{
var targetOffset = $(event.target).offset();
event.offsetX = event.pageX - targetOffset.left;
event.offsetY = event.pageY - targetOffset.top;
alert(event.offsetX + " " + event.offsetY);
}
}
}
HTML Code :
<div class="paymentTracker" onmouseover="MousePos();">
</div>
The function is working if I show an alert box only but this code having issue. I want mouse positions only on Firefox browser.
Thanks in advance.

try this : I think its not working because its not taking onmouseover function you have defined in html.
$( ".paymentTracker" ).mouseover(function(event) {
var x = event.clientX;
var y = event.clientY;
var coords = "X coords: " + x + ", Y coords: " + y;
alert(coords);
});
<div class="paymentTracker"></div>
<style>
.paymentTracker {width:300px; height:300px;border:1px solid;}
</style>
heres the fiddle : https://jsfiddle.net/0yptrjdw/
with your code
$( ".paymentTracker" ).mouseover(function(event) {
var targetOffset = $(event.target).offset();
event.offsetX = event.pageX - targetOffset.left;
event.offsetY = event.pageY - targetOffset.top;
alert(event.offsetX + " " + event.offsetY);
});

Javascript ondragend don't get the right coordinates

I am learning the html drag-and-drop methods. However, something is wrong when i want to make a div draggable, and change its position when i "drop" it.
I get the position of the cursor using e.screenX and e.screenY when I drag and drop it. However, I think that when I "drop" it, the coordinates changes comparing to the last coordinates when I was "dragging" it.
It works fine on Chrome and IE on PC running Windows 7; but the situation happens on both Safari and Chrome on my Mac, IE and Chrome on virtual machine running Windows 8.1. I am totally confused.
Thanks in advance. Here is my code.
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<div id="drag-1" class="drag module" draggable="true">
<div class="module-header">Draggable Div</div>
<div class="module-content">
<p>This is draggable.</p>
</div>
</div>
<script>
var draggable_div = document.getElementById("drag-1");
var startPos = {};
draggable_div.ondragstart = function(e){
// e.dataTransfer.setData("_", "");
console.log("start: " + e.offsetX + ", " + e.offsetY);
startPos = {
left: draggable_div.offsetLeft,
top: draggable_div.offsetTop,
offsetX: e.offsetX,
offsetY: e.offsetY
}
console.log( startPos );
}
draggable_div.ondrag = function(e){
// console.log("drag.. " + e.offsetX + ", " + e.offsetY);
draggable_div.style.top = startPos.top + e.offsetY - startPos.offsetY + "px";
draggable_div.style.left = startPos.left + e.offsetX - startPos.offsetX + "px";
//
}
draggable_div.ondragend = function(e){
// console.log("drop: " + e.offsetX + ", " + e.offsetY);
draggable_div.style.top = parseInt(startPos.top + e.offsetY - startPos.offsetY) + "px";
draggable_div.style.left = parseInt(startPos.left + e.offsetX - startPos.offsetX) + "px";
// console.log( startPos );
}
</script>
</body>
</html>

How to draw a line between two divs?

I'm currently trying to draw a diagonal line between the bottom right corner of one div to the top right corner of another. If possible, I would like to do it without jQuery. Is this possible?

http://jsfiddle.net/cnmsc1tm/
This won't work with IE8 or below because of CSS limitations.
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
};
}
function connect(div1, div2, color, thickness) { // draw a line connecting elements
var off1 = getOffset(div1);
var off2 = getOffset(div2);
// bottom right
var x1 = off1.left + off1.width;
var y1 = off1.top + off1.height;
// top right
var x2 = off2.left + off2.width;
var y2 = off2.top;
// distance
var length = Math.sqrt(((x2-x1) * (x2-x1)) + ((y2-y1) * (y2-y1)));
// center
var cx = ((x1 + x2) / 2) - (length / 2);
var cy = ((y1 + y2) / 2) - (thickness / 2);
// angle
var angle = Math.atan2((y1-y2),(x1-x2))*(180/Math.PI);
// make hr
var htmlLine = "<div style='padding:0px; margin:0px; height:" + thickness + "px; background-color:" + color + "; line-height:1px; position:absolute; left:" + cx + "px; top:" + cy + "px; width:" + length + "px; -moz-transform:rotate(" + angle + "deg); -webkit-transform:rotate(" + angle + "deg); -o-transform:rotate(" + angle + "deg); -ms-transform:rotate(" + angle + "deg); transform:rotate(" + angle + "deg);' />";
//
// alert(htmlLine);
document.body.innerHTML += htmlLine;
}
The Distance Formula
Finding the Center Of Two Points
Finding the Angle Between Two Points
CSS Transform:Rotate
HTML Element offset[Width|Height|Top|Left] properties
Edit (for others with the same problem):
If you need to, for example, create a line from two corners that are not the top right and bottom right divs, go to this section of the code:
// bottom right
var x1 = off1.left + off1.width;
var y1 = off1.top + off1.height;
// top right
var x2 = off2.left + off2.width;
var y2 = off2.top;
where you see + off1.width and + off1.height, that means that the code is calculating the position of the bottom or the right of the div. Remove the + off1.width or the + off1.height to get the left or the top of the div.
EDIT updated to a more standard getOffset function. If you want to get really anal you'd probably also have to add document.documentElement.client[Left/Top] and walk the offsetParent tree, but I think getBoundingClientRect() and window.page[X/Y]Offset are sufficient for an example like this.

There is a way to do it without jQ.
Find the position of your divs using offset.
Find the slope
draw 1x1px points from start to end position using the slope in your loop.