css - setting fixed height on Line using fabric.js and canvas -

css - setting fixed height on Line using fabric.js and canvas -

am using fabric.js creating canvas project. have created line using framework. however, there way set fixed length on line. reason beingness line drag able , stretches.

line = makeline([ 250, 125, 250, 175 ]),

it got quite complicated in comments let's sum few things:

here's solution simple case:

in http://jsfiddle.net/sprakashg/rbhhp/ have few lines this:

var p = e.target; p.line1 && p.line1.set({ 'x2': p.left, 'y2': p.top });

here, line1 line , p circle.

you can compute initial length of line , store it. next, can compute current line direction, line.p1 position of p. now, if normalize direction , multiply initial line length you'll new direction, pointing @ circle, keeping initial line length. add together line start , can store value in p.line1.set().

this work if have 2 circles connected line, if have few lines connected single circle, you'll not able move it.

solution more complex case:

in stickman case can't move knee joint because there's 1 point satisfies lines length constraints. in such case i'd add together simple hierarchy model.

if assume circle root of model, other objects leaves , branches of model tree. now, when move circle, should computations mentioned above line, connects parent.

then can take circles below in model hierarchy , move them same amount moved main circle.

with approach, when seek move knee joint pelvis-knee line move mouse maintain length (as want to). during motion of knee joint rest of leg move same amount, in effect you'll maintain length of knee-ankle line.

css html5-canvas fabricjs