We Keep Coding

Dynamically flexible path between two points in SVG

Hi can some one help me bend path like here
here u can see it in action (it's almost what i need, but it on canvas)
QUESTION
how i can calculate it?
which formula describes this
and how correctly to describe the parameters 'd' of path
here's my code (maybe it needs some improvements?)
var app = angular.module('app', []);
app.controller("ctrl", function ($scope) {
var lineGraph = d3.select("#container").append("svg:svg").attr("width", '100%').attr("height", '100%');
$scope.linesArr = [];
$scope.blocksArr = [{
id: 0,
x: 0,
y: 0,
lineToID: [2]
},{
id: 1,
x: 0,
y: 0,
lineToID: [0,2]
},{
id: 2,
x: 0,
y: 0,
lineToID: []
}];
$scope.createLines = function(){
for(var i = 0; i < $scope.blocksArr.length; i++){
if($scope.blocksArr[i].lineToID.length){
for(var j = 0; j < $scope.blocksArr[i].lineToID.length; j++){
$scope.linesArr[$scope.blocksArr[i].id + ":"+j] = (lineGraph.append("svg:line"));
}
}
}
};
$scope.createLines();
$scope.checkPoints = function(){
for(var i = 0; i < $scope.blocksArr.length; i++){
$scope.blocksArr[i].x = parseInt(document.querySelector('#b' + i).style.left) + (document.querySelector('#b' + i).offsetWidth / 2);
$scope.blocksArr[i].y = parseInt(document.querySelector('#b' + i).style.top) + (document.querySelector('#b' + i).offsetHeight / 2);
if($scope.blocksArr[i].lineToID.length){
for(var j = 0; j < $scope.blocksArr[i].lineToID.length; j++){
$scope.linesArr[$scope.blocksArr[i].id+":"+j]
.attr("x1", $scope.blocksArr[$scope.blocksArr[i].id].x)
.attr("y1", $scope.blocksArr[$scope.blocksArr[i].id].y)
.attr("x2", $scope.blocksArr[$scope.blocksArr[i].lineToID[j]].x)
.attr("y2", $scope.blocksArr[$scope.blocksArr[i].lineToID[j]].y)
.style("stroke", "rgb(6,120,155)");
//console.log();
}
}
}
};
$scope.dragOptions = {
start: function(e) {
//console.log("STARTING");
},
drag: function(e) {
$scope.checkPoints();
//console.log("DRAGGING");
},
stop: function(e) {
//console.log("STOPPING");
},
container: 'container'
}
});
app.directive('ngDraggable', function($document) {
return {
restrict: 'A',
scope: {
dragOptions: '=ngDraggable'
},
link: function(scope, elem, attr) {
var startX, startY, x = 0, y = 0,
start, stop, drag, container;
var width = elem[0].offsetWidth,
height = elem[0].offsetHeight;
// Obtain drag options
if (scope.dragOptions) {
start = scope.dragOptions.start;
drag = scope.dragOptions.drag;
stop = scope.dragOptions.stop;
var id = scope.dragOptions.container;
if (id) {
container = document.getElementById(id).getBoundingClientRect();
}
}
// Bind mousedown event
elem.on('mousedown', function(e) {
e.preventDefault();
startX = e.clientX - elem[0].offsetLeft;
startY = e.clientY - elem[0].offsetTop;
$document.on('mousemove', mousemove);
$document.on('mouseup', mouseup);
if (start) start(e);
});
// Handle drag event
function mousemove(e) {
y = e.clientY - startY;
x = e.clientX - startX;
setPosition();
if (drag) drag(e);
}
// Unbind drag events
function mouseup(e) {
$document.unbind('mousemove', mousemove);
$document.unbind('mouseup', mouseup);
if (stop) stop(e);
}
// Move element, within container if provided
function setPosition() {
if (container) {
if (x < container.left) {
x = container.left;
} else if (x > container.right - width) {
x = container.right - width;
}
if (y < container.top) {
y = container.top;
} else if (y > container.bottom - height) {
y = container.bottom - height;
}
}
elem.css({
top: y + 'px',
left: x + 'px'
});
}
}
}
})
html,body, #container{
height: 100%;
margin: 0;
}
.box{
position: absolute;
width: 100px;
height: 30px;
line-height: 30px;
border: 1px solid #c07f7f;
text-align: center;
background: #f3f4ff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-controller="ctrl" ng-app="app" id="container">
<div class="box" id="b{{$index}}" ng-repeat="i in blocksArr" ng-draggable='dragOptions' ng-style="{top: blocksArr[$index].y, left: blocksArr[$index].x}">{{$index}}</div>
</div>

Guessing, I'm thinking that what you want is to:
Show two points on screen.
Calculate an axis-aligned right triangle that touches those points.
Draw a triangle for the fill and colored lines for the edges of the triangles.
Allow the user to use the mouse to click and drag the points to new locations.
Dynamically update the right triangle based on those points.
It is unclear which part of the above you are having trouble with (other than, perhaps, "all of it"). In general, computer programming is about identifying what you want to do, breaking it down into simple steps (as I did above) and then working on those steps one at a time.
Can you calculate two 'random' points on screen? (Hint: Math.random() might be appropriate, or else you can just pick two fixed starting locations.)
Can you draw two points on screen? (Hint: You can use a SVG <circle> and adjust the cx and cy attributes.)
Can you calculate where the third point should be? (Hint: one way is to use the 'x' value of one point and the 'y' value of the other point.)
Can you draw a filled triangle between these points? (Hint: an easy way is to use an SVG <polygon> and adjust the points attribute.)
Can you draw three lines for the edges? (Hint: use <line> or <polyline> elements that are later in the document than the <polygon> so that they draw on top...but have the <circle> elements even lower in the document so that the circles draw on top of everything else.)
Can you make it so that when the user clicks and drags on the circles they stay under the mouse? (Hint: see this answer and example of mine, or go Google about making SVG elements draggable.)
During your drag handler, can you recalculate your triangle and points and lines and update them all? (Hint: you can either use setAttribute() to update attributes of SVG elements, e.g. setAttribute(myPoly,'points',arrayOfPoints.join()), or you can use SVG DOM bindings—e.g. myPoly.getItem(0).x = 43.)
Your question is too broad and vague currently. Either edit this question to make it specific to your exact desire and the exact code that is not working for you, or create a new question that is similarly targeted. Your code snippet does basically nothing useful for all the code you have in there.

Vis.js won't zoom-in further than scale 1.0 with .fit()

I am using the library Vis.js to display a Network.
For my application, I need the network to be displayed fullscreen, with the nodes almost touching the borders of its container.
The problem comes from network.fit(); it won't Zoom-In further than scale '1.0'
I wrote a Fiddle to showcase the issue:
http://jsfiddle.net/v1467x1d/12/
var nodeSet = [
{id:1,label:'big'},
{id:2,label:'big too'} ];
var edgeSet = [
{from:1, to:2} ];
var nodes = new vis.DataSet(nodeSet);
var edges = new vis.DataSet(edgeSet);
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {};
var network = new vis.Network(container, data, options);
network.fit();
console.log( 'scale: '+ network.getScale() ); // Always 1
How can I force Vis to zoom until the network is fullscreen?

As Richard said - now, this method does not work as expected. You can use a custom method, as a concept:
function bestFit() {
network.moveTo({scale:1});
network.stopSimulation();
var bigBB = { top: Infinity, left: Infinity, right: -Infinity, bottom: -Infinity }
nodes.getIds().forEach( function(i) {
var bb = network.getBoundingBox(i);
if (bb.top < bigBB.top) bigBB.top = bb.top;
if (bb.left < bigBB.left) bigBB.left = bb.left;
if (bb.right > bigBB.right) bigBB.right = bb.right;
if (bb.bottom > bigBB.bottom) bigBB.bottom = bb.bottom;
})
var canvasWidth = network.canvas.body.container.clientWidth;
var canvasHeight = network.canvas.body.container.clientHeight;
var scaleX = canvasWidth/(bigBB.right - bigBB.left);
var scaleY = canvasHeight/(bigBB.bottom - bigBB.top);
var scale = scaleX;
if (scale * (bigBB.bottom - bigBB.top) > canvasHeight ) scale = scaleY;
if (scale>1) scale = 0.9*scale;
network.moveTo({
scale: scale,
position: {
x: (bigBB.right + bigBB.left)/2,
y: (bigBB.bottom + bigBB.top)/2
}
})
}
[ http://jsfiddle.net/dv4qyeoL/ ]

I am sorry it is impossible to do this using network.fit. Here is the relevant code.
However, you can patch it yourself and include the modified version into your application which should then work as expected.
Here is a fiddle (line 38337 for the modification). I can't promise it won't break something else though.
Relevant code :
/*if (zoomLevel > 1.0) {
zoomLevel = 1.0;
} else if (zoomLevel === 0) {
zoomLevel = 1.0;
}*/
if (zoomLevel === 0) {
zoomLevel = 1.0;
}

fabricjs How can i keep fixed size on group elements while others scaling?

Hello I use fabricjs to play with the html canvas.
I create the canvas and i add group of objects on it.
On a group of objects, I need to keep fixed width & height for some objects while I scale the object.
I use the 'object:scaling' event to get the active object when it changes size, I read each object of the group and I assign element[i].set({'radius':5}) on the group objects that I want to be unchanged.
But the result is that , all the group object to resize.
I show you the snippet of the object:scaling event :
canvas.on('object:scaling',function(e){
var activeObject1 = e.target;
var elements = e.target._objects;
var count_elements = elements.length;
for(var i = 0; i < count_elements; i++) {
var type = elements[i].typeCircle;
if(type == "parts"){
//elements[i].set({"radius":8,"fill":"#abcde2","stroke":"#367827"});
//elements[i].set('radius',8);
/*elements[i].setWidth(16);
elements[i].setHeight(16);
elements[i].currentWidth = 16;
elements[i].currentHeight = 16;
elements[i].scaleX = 1;
elements[i].scaleY = 1;
console.log(elements[i]);
canvas.renderAll();*/
}
}
});
What should I write into the for loop to keep fixed size on some objects?
everything that I used above, they don't work except for the "fill":"#abcde2","stroke":"#367827"
If anyone has faced something similar on fabricjs, please let me know .

You must use setScaleX() and setScaleY() methods.
Here is an example...
var Rect = new fabric.Rect({
width: 200,
height: 200,
top: 100,
left: 100,
fill: 'rgba(255,0,0,0.5)',
stroke: '#000',
strokeWidth: 1,
});
var Circle = new fabric.Circle({
left: 100,
top: 100,
fill: '#FF00FF',
stroke: 'red',
radius: 100,
opacity: 1,
});
var Group = new fabric.Group([Rect, Circle])
canvas.add(Group)
canvas.on({
'object:scaling': onChange
})
function onChange(obj) {
var circle = obj.target.item(1),
group = obj.target,
scaleX = circle.width / group.getWidth(),
scaleY = circle.height / group.getHeight();
circle.setScaleX(scaleX);
circle.setScaleY(scaleY);
}
JSFIDDLE

Using fabricjs2 to stop scaling of a text item I have modified Rafik Avtoyan's function to work well. I have locked Y scaling for my group so you will have to add this if required.
function handleScalingEvent(obj) {
var text = obj.target.item(1),
group = obj.target,
scaleX = group.width / (group.width * group.scaleX);
text.set('scaleX', scaleX);
}

Best way to make the objects the same size is to divide desired width by object width. For example, if you want all added objects to be 256px the code will look this way:
function selectImage(imagePath){
fabric.Image.fromURL(imagePath, function(oImg) {
canvas.add(oImg);
let zoom = 256 / oImg.width;
oImg.set({ scaleX: zoom, scaleY: zoom, });
oImg.center();
});
}
In the case when the image will be 64px it will scale it by 4 to 256px and in case the image is 512px it will scale it by 0.5 which will make the image smaller to 256px.

Prototype animation in Kinetic JS

I would like to make a "prototype" of animations for a future game. But I'm totally a noob in kineticJS.
I have an object where I make all my functions:
var app = {}
I have a function init to build a layer, a stage and declare that I will use requestAnimationFrame:
init: function(){
layer = new Kinetic.Layer();
DrawingTab = [];
stage = new Kinetic.Stage({
container: 'canvasDemo',
width: 800,
height: 600
});
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(callback){
window.setTimeout(callback, 1000 / 60);
};
})();
}
Secondly, I've got one function to build my rects:
createObject: function(){
rect = new Kinetic.Rect({
x: 50,
y: 50,
width: 150,
height: 150,
fill: 'black',
name: 'batteur',
id: 'batteur'
});
rect1 = new Kinetic.Rect({
x: 300,
y: 50,
width: 150,
height: 150,
fill: 'black',
name: 'batteur1',
id: 'batteur1'
});
rect2 = new Kinetic.Rect({
x: 550,
y: 50,
width: 150,
height: 150,
fill: 'black',
name: 'batteur2',
id: 'batteur2'
});
layer.add(rect);
layer.add(rect1);
layer.add(rect2);
stage.add(layer);
DrawingTab.push(rect,rect1,rect2,rect3,rect4,rect5);
}
That's all I did. And then, I want to know how to animate like that:
every 20 secondes, one of the rect (select randomly) change of color,
and the user have to click on it.
the user have 5sec to click on it, and if he doesn't click, the rect change to the beginning color.
I hope explanations are clear and something will can help me, because I'm totally lost.

You should use Kinetic.Animation for animations because it optimizes redraws. Here's an example
If your game is using sprites, you should be using the Sprite shape. Here's an example of that

You don't need requestAnimationFrame or Kinetic.Animation to handle this, considering the kind of animation you want. Only use animations if you need to change the animation status every frame.
See this working DEMO.
Using setInterval and setTimeout the application became more performant.
I reduce the time of change of color to 5 seconds and the time to click to 2 seconds, just to quickly visualization of the features.
Here is the code added:
// times (make changes according)
var timeToChange = 5000; // 5 seconds
var timeToClick = 2000; // 2 seconds
// render all rects
layer.drawScene();
// add a logical rect for each rect in DrawingTab
var LogicalTab = [];
for (var i = 0; i < DrawingTab.length; ++i) {
LogicalTab.push({
isPressed: false,
frame: 0
});
}
// return a random integer between (min, max)
function random(min, max) {
return Math.round(Math.random() * (max - min) + min);
};
// define colors
var colors = ["red", "green", "blue"];
// reset state of current rect
function reset(n) {
var drect = DrawingTab[n];
var lrect = LogicalTab[n];
// check if current rect was clicked
setTimeout(function () {
if (!lrect.isPressed) {
drect.setFill("black");
// redraw scene
layer.drawScene();
lrect.frame = 0;
}
// turn off click event
drect.off("click");
}, timeToClick);
}
// start the animation
var start = setInterval(function () {
// select a rect randomly
var rand = random(0, 2);
var drect = DrawingTab[rand];
var lrect = LogicalTab[rand];
// change color
drect.setFill(colors[lrect.frame]);
// redraw scene
layer.drawScene();
// flag that current rect is not clicked
lrect.isPressed = false;
// check for click events
drect.on("click", function () {
// flag that current rect is clicked
lrect.isPressed = true;
// hold current color
lrect.frame++;
lrect.frame = lrect.frame % colors.length;
});
// reset current rect (only if it is not clicked)
reset(rand);
}, timeToChange);

I'm a newbye here, but I hope I'm able to help. KineticJS don't need requestAnimationFrame, because it has already something that handles animations. so first of all I think you should have a look to this page
if you want to make the rect's color change every 20 s, you may do something like this:
var anim = new Kinetic.Animation(function(frame) {
if(frame.time > 20000)
{
frame.time = 0;
colors = ['red', 'blue', 'violet'];
ora = colors[Math.floor(Math.random()*3)];
DrawingTab[Math.floor(Math.random*6)].setAttrs({fill: ora});
}
},layer);
then, for the 5sec stuff, I tried to write something
var currentRect = { value:0, hasClicked : true };
var anim2 = new Kinetic.Animation(function(frame) {
if(frame.time > 20000)
{
frame.time = 0;
colors = ['red', 'lightblue', 'violet'];
ora = colors[Math.floor(Math.random()*3)];
currentRect.hasClicked = false;
currentRect.value=Math.floor(Math.random()*6);
DrawingTab[currentRect.value].setAttrs({fill: ora});
}
if (!currentRect.hasClicked && frame.time>5000)
{
DrawingTab[currentRect.value].setAttrs({fill: 'black'});
currentRect.hasClicked = true;
}
DrawingTab[currentRect.value].on('click',function(){ if (frame.time<=5000) currentRect.hasClicked = true;});
},layer);
anim2.start();
I've just tried something similiar and it looks like it's working :)
p.s. sorry about my english, I'm only a poor italian student
p.p.s. I'm sure the code can be optimized, but for now I think it can be alright

Can't get counter variable in event handler

k=0;
var sf = new Array();
function draw_sf (type,sf_text,schriftgroesse,sf_width,sf_height,x0,y0,ports_top,ports_right,ports_bottom,ports_left) {
sf[k] = new Kinetic.Group({
draggable: true
});
sf[k]['x0']=x0;
sf[k]['y0']=y0;
m=0;
sf[k][m] = new Kinetic.Rect({
x: x0,
y: y0,
width: sf_width,
height: sf_height,
fill: '#EEE',
stroke: '#000',
strokeWidth: randbreite_sf
});
sf[k].add(sf[k][m]);
m++;
sf[k].on('dragend', function() {
var dx=parseFloat(document.getElementsByName("dx")[0].value);
var dy=parseFloat(document.getElementsByName("dy")[0].value);
sf[k]['x']=sf[k]['x0']+dx;
sf[k]['y']=sf[k]['y0']+dy;
});
boxLayer.add(sf[k]);
k++;
}
My function draw_sf() draws rectangles, which can be moved my drag&drop. After being droped (event handler 'dragend') i want to save the new position of the element in an array. But my counter variable 'k' doesnt count in the dragend-function. k is always the number of times i called the draw_sf().
So how can i save the actual positions of my rectangles?

Consider changing the approach a bit into something like:
var sf = new Array();
function draw_sf(type, sf_text, schriftgroesse, sf_width, sf_height, x0, y0, ports_top, ports_right, ports_bottom, ports_left) {
var kineticGroup = new Kinetic.Group({
draggable:true
});
kineticGroup['x0'] = x0;
kineticGroup['y0'] = y0;
m = 0;
kineticGroup[m] = new Kinetic.Rect({
x:x0,
y:y0,
width:sf_width,
height:sf_height,
fill:'#EEE',
stroke:'#000',
strokeWidth:randbreite_sf
});
kineticGroup.add(kineticGroup[m]);
m++;
kineticGroup.on('dragend', function () {
var dx = parseFloat(document.getElementsByName("dx")[0].value);
var dy = parseFloat(document.getElementsByName("dy")[0].value);
kineticGroup['x'] = kineticGroup['x0'] + dx;
kineticGroup['y'] = kineticGroup['y0'] + dy;
});
boxLayer.add(kineticGroup);
sf.push(kineticGroup);
}
The truth is that you actually don't need any counter to store the history of the rect positions - you can just push it to the array using Array.prototype.push: http://www.w3schools.com/jsref/jsref_push.asp