Develop Reference

Fabric.js moving the points of a polygon shape fails when flipped

Wasted weeks - Need solution to edit Polygons using either Fabric.js and Konva.js - Both have no way to actually update the poly points and transformer when the poly or it's points are MOVED, FLIPPED or MIRRORED. I'll assume the array points need to be reversed and the end the starting index switch depending on the quadrant the poly has been flipped.
If anyone have a solution please post. Fabric.js code in CodePen: https://codepen.io/Rstewart/pen/LYbJwQE
/* CODE FROM POLY DEMO ON FABRIC WEBSITE - CODE FAILS WHEN FLIPPED OR MIRRORED */
function polygonPositionHandler(dim, finalMatrix, fabricObject) {
var x = (fabricObject.points[this.pointIndex].x - fabricObject.pathOffset.x),
y = (fabricObject.points[this.pointIndex].y - fabricObject.pathOffset.y);
return fabric.util.transformPoint( { x: x, y: y },
fabric.util.multiplyTransformMatrices(
fabricObject.canvas.viewportTransform,
fabricObject.calcTransformMatrix()
)
);
}
function actionHandler(eventData, transform, x, y) {
var polygon = transform.target, currentControl = polygon.controls[polygon.__corner],
mouseLocalPosition = polygon.toLocalPoint(new fabric.Point(x, y), 'center', 'center'),
polygonBaseSize = polygon._getNonTransformedDimensions(), size = polygon._getTransformedDimensions(0, 0),
finalPointPosition = {
x: mouseLocalPosition.x * polygonBaseSize.x / size.x + polygon.pathOffset.x,
y: mouseLocalPosition.y * polygonBaseSize.y / size.y + polygon.pathOffset.y
};
polygon.points[currentControl.pointIndex] = finalPointPosition; return true;
}
function anchorWrapper(anchorIndex, fn) {
return function(eventData, transform, x, y) {
var fabricObject = transform.target,
absolutePoint = fabric.util.transformPoint({
x: (fabricObject.points[anchorIndex].x - fabricObject.pathOffset.x),
y: (fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y),
}, fabricObject.calcTransformMatrix()),
actionPerformed = fn(eventData, transform, x, y),
newDim = fabricObject._setPositionDimensions({}),
polygonBaseSize = fabricObject._getNonTransformedDimensions(),
newX = (fabricObject.points[anchorIndex].x - fabricObject.pathOffset.x) / polygonBaseSize.x,
newY = (fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y) / polygonBaseSize.y;
fabricObject.setPositionByOrigin(absolutePoint, newX + 0.5, newY + 0.5);
return actionPerformed;
}
}

Drawing easeljs radial gradient strokes

I'm trying to implement some more fancy canvas drawing, such as something that looks more like a brush stroke. I ran into and awesome resource (http://perfectionkills.com/exploring-canvas-drawing-techniques/), but I'm having some troubles converting it to syntax that works with easeljs.
Original Example: http://codepen.io/kangax/pen/FdlHC
My Attempt: http://codepen.io/mcfarljw/pen/Jifzk
var currentPoint = { x: event.stageX, y: event.stageY };
var dist = distanceBetween(lastPoint, currentPoint);
var angle = angleBetween(lastPoint, currentPoint);
drawingCanvas.graphics.setStrokeStyle(5, 'round', 'round');
for (var i = 0; i < dist; i += 5) {
x = lastPoint.x + (Math.sin(angle) * i);
y = lastPoint.y + (Math.cos(angle) * i);
drawingCanvas.graphics.beginRadialGradientStroke(["#F00","#00F"], [0, 1], x, y, 5, x, y, 10)
}
lastPoint = currentPoint;
stage.update();
It's not producing any errors, but it's also not drawing anything on the canvas. Any pointers on what I'm doing wrong? Thanks!

Your version is almost complete, expect that you missed the most important part of actually drawing the (current part of the) line:
drawingCanvas.graphics.moveTo(lastPoint.x, lastPoint.y);
drawingCanvas.graphics.lineTo(currentPoint.x, currentPoint.y);
If updated your code-pen here: http://codepen.io/anon/pen/fCcEJ

JS Canvas - draw line at a specified angle

I'd like to make an app where a ball moves at the angle your mouse hits it. So if you swipe your mouse down from top left quadrant at 30 degrees (I guess that would be 180-30 = angle of 150 degrees), it will knock the ball that way. I've been drawing my lines as such:
function drawAngles () {
var d = 50; //start line at (10, 20), move 50px away at angle of 30 degrees
var angle = 80 * Math.PI/180;
ctx.beginPath();
ctx.moveTo(300,0);
ctx.lineTo(300,600); //x, y
ctx.moveTo(0,300);
ctx.lineTo(600,300);
ctx.moveTo(300,300);
ctx.lineTo(600,100);
ctx.arc(300,300,300,0,2*Math.PI);
ctx.stroke();
}
But this doesn't give me an idea of what the angles are.
Then I move the ball at that angle (for now, I'm animating it without mouse interaction)
function getAngleX (x) {
return x = x + (50 * Math.cos(Math.PI/6));
}
function getAngleY(y) {
return y = y + (50 * Math.sin(Math.PI/6));
}
//just animate this box to move at an angle from center down at 30 degrees
$(".anotherBox").mouseenter(function(e) {
pos = $(this).position();
box2X = pos.left;
box2Y = pos.top;
$(this).animate({
//top : $(window).outerHeight(),
top : getAngleY(box2Y)+"px",
left: getAngleX(box2X)+"px",
}, "slow");
});
So how can I draw a line at a specified angle? I'd like to make sure my ball is following along that path.

You can use different approaches to achieve this but if you want to use the same basis to move and draw then this approach may suit well.
First we use a function to get step values for x and y based on the angle (in radians):
function getSteps(angle) {
var cos = Math.cos(angle),
sin = Math.sin(angle);
return {
x: cos -sin,
y: sin + cos
}
}
Then using these steps values we can scale them to get an end point, or scale them gradually to animate an object along the line. A simple loop could look like this (just for example):
function loop() {
var x = i * step.x, // scale using i
y = i * step.y;
ctx.fillRect(200 + x, 200 + y, 2, 2); // add to origin start point 200, 200
i += 1; // increase i
if (i < length) requestAnimationFrame(loop);
}
Live demo
If you just want to draw a line at a certain angle you can do the following instead:
function lineAtAngle(x1, y1, length, angle) {
ctx.moveTo(x1, y1);
ctx.lineTo(x1 + length * Math.cos(angle), y1 + length * Math.sin(angle));
}
then stroke it.
Hope this helps!

If i guess right, i think you want the mouse act like a baseball bat, and you need to measure the current mouse angle, that is to store previous mouse position and do some math.
You have also to keep track if you allready handled current collision, to avoid the ball being 'sticky' and follow the mouse.
http://jsfiddle.net/gamealchemist/z3U8g/
var ctx = cv.getContext('2d');
var ball = {
x:200, y:200,
r : 30,
vx : 0.4, vy:0.4
}
// when mouse moved that distance, ball speed norm will be 1
var speedNorm = 10;
var collisionOnGoing = false;
function collide() {
var dist = sq(ball.x - mx) + sq (ball.y-my);
// too far from ball ?
if (dist > sq(ball.r)) {
collisionOnGoing = false;
return;
}
// return if collision allready handled
if (collisionOnGoing) return;
var mouseDist =Math.sqrt( sq(mx-lastmx) + sq(my-lastmy) );
// no collision if mouse too slow
if (mouseDist<speedNorm/5) return;
// launch the ball in current direction
// with a speed relative to the mouse speed.
var mouseAngle = Math.atan2(my-lastmy, mx-lastmx);
ball.vx= (mouseDist / speedNorm ) * Math.cos(mouseAngle);
ball.vy= (mouseDist / speedNorm ) * Math.sin(mouseAngle);
collisionOnGoing = true;
}
function animate() {
requestAnimationFrame(animate);
ctx.clearRect(0,0,400,400);
// collide ball with mouse
collide();
// draw ball
ctx.beginPath();
ctx.arc(ball.x, ball.y, ball.r, 0, 6.3);
ctx.fill();
ctx.closePath();
// move
ball.x+=ball.vx;
ball.y+=ball.vy;
// collide with screen
if (ball.x>400) ball.vx=-Math.abs(ball.vx);
if (ball.x<0) ball.vx=Math.abs(ball.vx);
if (ball.y>400) ball.vy=-Math.abs(ball.vy);
if (ball.y<0) ball.vy=Math.abs(ball.vy);
}
animate();
// --- Mouse handling ---
addEventListener('mousemove', mouseMove);
var mx=-1, my=-1, lastmx=-1, lastmy=-1;
var cvRect = cv.getBoundingClientRect();
var cvLeft = cvRect.left;
var cvTop = cvRect.top;
function mouseMove(e) {
lastmx = mx; lastmy=my;
mx=e.clientX - cvLeft;
my=e.clientY - cvTop;
}
function sq(x) { return x*x; }

Combining 2 dots in 2 images by moving and re-sizing one of the images

I need to place a picture with glasses on a face dynamically.
Example: http://jsfiddle.net/r8VAb/1/
I know the coordinates of the center of the glasses and eyes, in the example marked with red dots.
Now need to move the picture and make the dots combine, but have no idea ho to rotate to get the right dots combine having in attention that the left dot will have to be the axis.
Also, since I resize the glasses in first place, then when moving the dots don't combine I guess because the coordinates are not the same anymore after resizing.
Maybe I'm doing this in a total wrong way and there's some other way more effective and easy. I'm a backend/database developer and this is something new to me.
This is how I am doing it:
$(document).ready(function () {
// Glasses points Coordinates
$('#glasses').data("left", {x: 84,y: 40});
$('#glasses').data("right", {x: 223,y: 40});
//Picture points coordinates
$('#picture').data("left", {x: 96,y: 163});
$('#picture').data("right", {x: 209,y: 140});
});
$('#button').click(function () {
$('#glasses_place').attr('src', $('#glasses').attr('src'));
resize(); // Glasses need to be resized to match the eyes distance
positioning(); // Glasses need to
});
function resize() {
var distance_eyes = Math.floor(px_distance($('#picture').data("left").x, $('#picture').data("left").y, $('#picture').data("right").x, $('#picture').data("right").y));
var distance_glasses = Math.floor(px_distance($('#glasses').data("left").x, $('#glasses').data("left").y, $('#glasses').data("right").x, $('#glasses').data("right").y));
var diff = Math.floor(distance_glasses - distance_eyes);
// Glasses can be smaller or larger than face
if (distance_glasses > distance_eyes) {
var resize = $('#glasses').width() - diff;
} else {
var resize = $('#glasses').width() + diff;
}
alert("Now resizing");
$('#glasses_place').css('width', resize);
}
function px_distance(lx, ly, rx, ry) {
a = rx - lx;
b = ry - ly;
distance = Math.sqrt(a * a + b * b);
return distance;
}
function positioning() {
var moveY = Math.floor($('#picture').data("left").y - $('#glasses').data("left").y);
alert("Moving Down");
$('#glasses_place').css('margin-top', moveY);
var moveX = Math.floor($('#picture').data("left").x - $('#glasses').data("left").x);
alert("Moving Right");
$('#glasses_place').css('margin-left', moveX);
}
Thanks for helping.

function rotate() {
var firstY = $('#picture').data("left").y,
lastY = $('#picture').data("right").y,
firstX = $('#picture').data("left").x,
lastX = $('#picture').data("right").x;
// angle of eye line
var deg = Math.atan2(lastY - firstY, lastX - firstX) / Math.PI * 180;
var degStr = 'rotate(' + deg + 'deg)';
$('#glasses_place').css({
'-moz-transform': degStr,
'-webkit-transform': degStr,
'-ms-transform': degStr,
'-o-transform': degStr
});
}
See: http://jsfiddle.net/r8VAb/2/
Who not use canvas for that?
Update
Result with correct formulas:
You need:
Proportionality
Pythagorean theorem
Rotation matrix
See comments in http://jsfiddle.net/r8VAb/7/

RaphaelJS Move Rotated elements

I have a rect rotated by 45degrees when I try and move it in a straight line using the normal move drag functionality it moves with the 45degree rotation. I've seen a lot of posts regarding this and that this is intended to work like this but I haven't found a simple way to fix this.
I know about the raphael.free_transform.js plugin but I don't need 90% of the script.
From other posts I know I'm supposed to use Math.atan2 but alas my Math skills aren't that great.
My current move function looks like this:
function (dx, dy) {
var att = this.type == "rect" ? {x: this.ox + dx, y: this.oy + dy} : {cx: this.ox + dx, cy: this.oy + dy};
this.attr(att);
for (var i = connections.length; i--;) {
r.connection(connections[i]);
}
r.safari();
}

You have to use "transform" method instead of simply changing x-y attrs.
var data = {};
var R = Raphael('raphael', 500, 500);
var rect = R.rect(100, 100, 100, 50).attr({fill: "#aa5555"}).transform('r45');
var default_transform = rect.transform();
var onmove = function (dx, dy) {
rect.transform(default_transform + 'T' + dx + ',' + dy);
};
var onstart = function () {};
var onend = function () {
default_transform = rect.transform();
};
rect.drag(onmove, onstart, onend);
I have created a live demo for you on JSfiddle: http://jsfiddle.net/pybBq/
Please note that you have to use big T letter in transform string (not small t) to make transformation absolute and not relative. Please read Raphael's docs on transform for more info: http://raphaeljs.com/reference.html#Element.transform