CODEWITHSUNDEEP
kineticjs
WangHongjian
WangHongjian

Reputation: 383

Why can't I draw a spline not a straight line?

I drew a quadratic curve by using KineticJs, it seems a shape type object, how can I active and move it?

See the code here: http://jsfiddle.net/walkingp/FK2Eh/3/

    var stage = new Kinetic.Stage({
    container: 'container',
    width: 600,
    height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);
var spline = new Kinetic.Line();
...

Why can't I draw a curve, now it's a straight line?

Upvotes: 0

Views: 169

Answers (1)

markE
markE

Reputation: 105035

Your code is drawing a set of points connected by curves--that's a Spline.

So you might refactor your code to use a Kinetic.Spline instead of manually drawing the spline with a Kinetic.Shape.

The reason is that with Kinetic.Shapes you must define your own hit function used to drag the spline. That hit function can be quite complex for splines.

Here's example code and a Demo: http://jsfiddle.net/m1erickson/Lwdym/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script>

<style>
body{padding:20px;}
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:350px;
  height:350px;
}
</style>        
<script>
$(function(){

      var stage = new Kinetic.Stage({
          container: 'container',
          width: 350,
          height: 350
      });
      var layer = new Kinetic.Layer();
      stage.add(layer);

      var spline = new Kinetic.Line({
        points: [20,50,240,50,200,150,250,150],
        stroke: 'blue',
        strokeWidth: 12,
        lineCap: 'round',
        tension: 1,
        draggable:true
      });
      layer.add(spline);
      layer.draw();


}); // end $(function(){});

</script>       
</head>

<body>
    <h4>A draggable Spline</h4>
    <div id="container"></div>
</body>
</html>

Upvotes: 1

Related Questions