Hi,

Essentially I am trying to achieve two functions:

1) Dragging the Canvas.Object along the Canvas.Path (with mouse)(high
priority)

2) Animating the Canvas.Ojbect movement along the Canvas.Path path

What would be the quick'n elegant way to do these two things.

Any reply highly and much appreciated,
Akonkagva

Interesting functionalities. I haven't done this, and not sure right away
how to approach it best. Animation along the path seems easier, as you'd
just need to have a function producing left/top values for each point in
time (according to left/top value of point on path at that time).

Perhaps someone else has experimented with this.

--
kangax

On Thu, Jun 21, 2012 at 4:46 PM, Akonkagva <peter.puzan...@hotmail.com>wrote:

Is it even possible to get the sequentual values from the canvas.Path
object ?(sequence of points(x,y) used to draw path) ?

Good point. If your path is represented as a function, that's simple. Not
sure about coords from SVG-like paths. I'm sure you can find a lot on this
topic, though.

--
kangax

On Fri, Jun 22, 2012 at 5:52 PM, Akonkagva <peter.puzan...@hotmail.com>wrote:

Thank you for your answer, I have created a simple func that return an
array of Path points fiven the required number of points and Path.

<script type="text/javascript">
 function getPathValues(path_val,samples){

  var path = document.createElementNS('http://www.w3.org/2000/svg','path');
  path.setAttribute('d',path_val);
  //var doc = path.ownerDocument;

  var points = [];
  var len  = path.getTotalLength();
  var step = step=len/samples;
  for (var i=0;i<=len;i+=step){
   var p = path.getPointAtLength(i);
   points.push( p.x+','+p.y );
  }
  console.log(points);
  return points;
 }
 getPathValues("M 65 0 Q 100, 100, 200, 0",50);
</script>

Dragging along the Path Object:
<script src="fabric.js"></script>
    <!--[if lt IE 9]>
      <script src="
https://raw.github.com/kangax/fabric.js/master/lib/excanvas.js"></script>
    <![endif]-->
<canvas id="c" width="500" height="500" style="border:1px solid
#ccc"></canvas>
<script type="text/javascript" src="jquery.js"></script>
<script id="main">
var canvas = new fabric.Canvas('c');
var circle = new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left:
300 });
canvas.add(circle);
canvas.observe({
  'object:moving': onObjectMoving

var line = new fabric.Path('M 65 0 Q 100, 100, 200, 0', { fill: '', stroke:
'black' });;
var points = getPathValues("M 65 0 Q 100, 100, 200, 0",45);
canvas.add(line);
function onObjectMoving(e) {
    var activeObject = e.target;
  var currentObjX = activeObject.left;
  var currentObjY = activeObject.top;
  var best = 0;
  var pastDist = 1000;

  for(var i =0; i < points.length; i = i +2)
  {
  var x = points[i];
  var y = points[i+1];
  var distance = lineDistance(mouseX,mouseY,x,y);
  if(distance < pastDist)
  {
   pastDist = distance;
   best = i;
  }
  }
  activeObject.left = points[best]
  activeObject.top = points[best+1];

function lineDistance( x0,y0, x1,y1 )
    {
    var xs = 0;
    var ys = 0;
    xs = x1 - x0;
    xs = xs * xs;
    ys = y1 - y0;
    ys = ys * ys;
    return Math.sqrt( xs + ys );

function getPathValues(path_val,samples){

  var path = document.createElementNS('http://www.w3.org/2000/svg','path');
  path.setAttribute('d',path_val);
  var points = [];
  var len  = path.getTotalLength();
  var step = step=len/samples;
  for (var i=0;i<=len;i+=step){
   var p = path.getPointAtLength(i);
   points.push( p.x );
   points.push( p.y );
  }
  console.log(points);
  return points;
 }
 var mouseX;
 var mouseY;
jQuery(document).ready(function(){
   $(document).mousemove(function(e){
   mouseX = e.pageX;
   mouseY = e.pageY;
   });

Animating along the movement path:

<script src="fabric.js"></script>
    <!--[if lt IE 9]>
      <script src="
https://raw.github.com/kangax/fabric.js/master/lib/excanvas.js"></script>
    <![endif]-->
<canvas id="c" width="500" height="500" style="border:1px solid
#ccc"></canvas>
<script type="text/javascript" src="jquery.js"></script>
<script id="main">
var canvas = new fabric.Canvas('c');

var circle = new fabric.Circle({ radius: 30, fill: '#f55', top: 0, left: 65

var circleToScale = new fabric.Circle({ radius: 30, fill: '#f10', top: 250,
left: 250 });
canvas.add(circleToScale);
canvas.add(circle);

var line = new fabric.Path('M 65 0 Q 100, 100, 200, 0', { fill: '', stroke:
'black' });;

var points = getPathValues("M 65 0 Q 100, 100, 200, 0",75);
canvas.add(line);

function getPathValues(path_val,samples){

  var path = document.createElementNS('http://www.w3.org/2000/svg','path');
  path.setAttribute('d',path_val);
  var points = [];
  var len  = path.getTotalLength();
  var step = step=len/samples;
  for (var i=0;i<=len;i+=step){
   var p = path.getPointAtLength(i);
   points.push( p.x );
   points.push( p.y );
  }
  console.log(points);
  return points;
 }

 var i = 0;

 setInterval(function animate() {
 i = i +2;
 if(i > points.length)
 {
 i = 0;
 }

 circle.left = points[i];
 circle.top = points[i+1];

 if(i != 0)
 circleToScale.scale(i/10);
  canvas.renderAll();

</script>

  </body>
</html>