Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Put your code in a jsfiddle and I'll play around with it. But looking at it, it seems your code is a bit wrong. </p> <p>Each time the mouse moves you are redefining a local variable pen and re-adding the same pen layer. And its structured a bit off. Try:</p> <pre><code>$('#container').mousemove(function(e){ var pen = new Kinetic.Shape({ drawFunc: function(canvas) { var context = canvas.getContext(); if(moving == false){ context.beginPath(); context.moveTo(startx,starty); moving = true; } context.lineTo(e.pageX,e.pageY); context.strokeStyle='#ff00ff'; context.lineWidth = 1; context.stroke(); } }); penlayer.add(pen); stage.add(penlayer); }); </code></pre> <p>You would also be better off with something that uses the other mouse events for better control, assuming you are looking to create straight lines.</p> <pre><code> $('#container').mousedown(function(e){ //draw temporary shape } $('#container').mousemove(function(e){ //redraw shape } $('#container').mouseup(function(e){ //add shape to layer } </code></pre> <p>Also, why don't you use Kinetic.Line() and something like:</p> <pre><code> var startLine; // make this global because this can be redefined $('#container').mousedown(function(e){ startLine = new Kinetic.Line({ points: [stage.getUserPosition().x, stage.getUserPosition().y], stroke: 'red', strokeWidth: 15, lineCap: 'round', lineJoin: 'round' }); } $('#container').mouseUp(function(e){ var endLine = new Kinetic.Line({ points: [startLine.getX(), startLine.getY(), stage.getUserPosition().x, stage.getUserPosition().y], stroke: 'red', strokeWidth: 15, lineCap: 'round', lineJoin: 'round' }); layer.add(endLine); } </code></pre> <p>This is a very rough solution, and you'd have to resolve the scope of startLine and endLine.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload