Animate a shape along a line or path in konva
0
Is it possible in Konva to animate a shape (marker, circle) along a lline/path. I tried to manually calculate positions over time but this is only feasible if the line is straight from A to B, but I'm interested in a bezier curve and multiple path points.
So I wonder if Konva supports this kind of thing or someone could give a direction how to approach this.
html5-canvas konvajs react-konva
edited Nov 18 '18 at 11:49
Vanquished Wombat
3,95011338
asked Nov 16 '18 at 1:25
florian norbert bepunktflorian norbert bepunkt
517
add a comment |
0
Is it possible in Konva to animate a shape (marker, circle) along a lline/path. I tried to manually calculate positions over time but this is only feasible if the line is straight from A to B, but I'm interested in a bezier curve and multiple path points.
So I wonder if Konva supports this kind of thing or someone could give a direction how to approach this.
html5-canvas konvajs react-konva
edited Nov 18 '18 at 11:49
Vanquished Wombat
3,95011338
asked Nov 16 '18 at 1:25
florian norbert bepunktflorian norbert bepunkt
517
Okay, basically using getPointAtLength(length) and getLength() should allow to get a position of a point on a graph… which then could be animated: konvajs.github.io/api/Konva.Path.html
– florian norbert bepunkt
Nov 16 '18 at 1:58
add a comment |
0
0
0
Is it possible in Konva to animate a shape (marker, circle) along a lline/path. I tried to manually calculate positions over time but this is only feasible if the line is straight from A to B, but I'm interested in a bezier curve and multiple path points.
So I wonder if Konva supports this kind of thing or someone could give a direction how to approach this.
html5-canvas konvajs react-konva
edited Nov 18 '18 at 11:49
Vanquished Wombat
3,95011338
asked Nov 16 '18 at 1:25
florian norbert bepunktflorian norbert bepunkt
517
Is it possible in Konva to animate a shape (marker, circle) along a lline/path. I tried to manually calculate positions over time but this is only feasible if the line is straight from A to B, but I'm interested in a bezier curve and multiple path points.
So I wonder if Konva supports this kind of thing or someone could give a direction how to approach this.
html5-canvas konvajs react-konva
html5-canvas konvajs react-konva
edited Nov 18 '18 at 11:49
Vanquished Wombat
3,95011338
asked Nov 16 '18 at 1:25
florian norbert bepunktflorian norbert bepunkt
517
edited Nov 18 '18 at 11:49
Vanquished Wombat
3,95011338
asked Nov 16 '18 at 1:25
florian norbert bepunktflorian norbert bepunkt
517
edited Nov 18 '18 at 11:49
Vanquished Wombat
3,95011338
edited Nov 18 '18 at 11:49
Vanquished Wombat
3,95011338
edited Nov 18 '18 at 11:49
Vanquished Wombat
3,95011338
3,95011338
asked Nov 16 '18 at 1:25
florian norbert bepunktflorian norbert bepunkt
517
asked Nov 16 '18 at 1:25
florian norbert bepunktflorian norbert bepunkt
517
asked Nov 16 '18 at 1:25
florian norbert bepunktflorian norbert bepunkt
517
517
Okay, basically using getPointAtLength(length) and getLength() should allow to get a position of a point on a graph… which then could be animated: konvajs.github.io/api/Konva.Path.html
– florian norbert bepunkt
Nov 16 '18 at 1:58
add a comment |
Okay, basically using getPointAtLength(length) and getLength() should allow to get a position of a point on a graph… which then could be animated: konvajs.github.io/api/Konva.Path.html
– florian norbert bepunkt
Nov 16 '18 at 1:58
Okay, basically using getPointAtLength(length) and getLength() should allow to get a position of a point on a graph… which then could be animated: konvajs.github.io/api/Konva.Path.html
– florian norbert bepunkt
Nov 16 '18 at 1:58
Okay, basically using getPointAtLength(length) and getLength() should allow to get a position of a point on a graph… which then could be animated: konvajs.github.io/api/Konva.Path.html
– florian norbert bepunkt
Nov 16 '18 at 1:58
add a comment |
1 Answer
1
active
oldest
votes
1
As you have identified, the Path object has some handy methods in getLength() to find the overall path length and getPointAtLength() which can then be used to find the (x,y) at any given point along the length.
In case it helps anyone, I built the path data from the output of another snippet from this other question.
var data = ["x":34,"y":34,"x":84,"y":64,"x":141,"y":79,"x":181.5,"y":78.5,"x":218,"y":62,"x":223,"y":40,"x":240,"y":26,"x":259.5,"y":25,"x":271,"y":40,"x":292.5,"y":53,"x":311.25,"y":55.5,"x":330.625,"y":46.75,"x":332.3125,"y":30.375,"x":349.15625,"y":10.1875,"x":374.578125,"y":10.09375,"x":392,"y":26,"x":411,"y":36,"x":444.5,"y":37,"x":453.875,"y":27.25,"x":463.25,"y":17.5,"x":472.9375,"y":10.625,"x":494.625,"y":15.75,"x":530,"y":48,"x":534,"y":88,"x":540,"y":150,"x":552,"y":198,"x":544,"y":227,"x":522,"y":256,"x":504.5,"y":263,"x":471,"y":262,"x":448,"y":252,"x":372,"y":214,"x":290,"y":146,"x":256,"y":100,"x":198,"y":104,"x":182,"y":140,"x":204,"y":185,"x":203,"y":201.5,"x":190,"y":214,"x":174.5,"y":218,"x":155,"y":214,"x":124,"y":222,"x":113.5,"y":232.5,"x":95,"y":227,"x":75.5,"y":211.5,"x":72,"y":188,"x":58,"y":136]
// Set up the canvas / stage
var stage = new Konva.Stage(container: 'container1', width: 600, height: 300);
// Add a layer for line
var layer = new Konva.Layer(draggable: false);
stage.add(layer);
// draw a path.
var path = new Konva.Path(
x: 0,
y: 0,
stroke: 'cyan'
);
layer.add(path)
// Load the path points up using M = moveto, L = lineto.
var p = "M" + data[0].x + " " + data[0].y;
for (var i = 1; i < data.length; i = i + 1)
p = p + " L" + data[i].x + " " + data[i].y;
path.setData(p);
// add a circle to be animated along the path
var circle = new Konva.Circle( x: data[0].x, y: data[0].y, radius: 10, fill: 'Magenta');
layer.add(circle);
stage.draw();
$('#reset').on('click', function()
// Now animate a circle along the path
var steps = 50; // number of steps in animation
var pathLen = path.getLength();
var step = pathLen / steps;
var frameCnt = 0, pos =0, pt;
anim = new Konva.Animation(function(frame)
pos = pos + 1;
pt = path.getPointAtLength(pos * step);
circle.position(x: pt.x, y: pt.y);
, layer);
anim.start();
)
$('#reset').trigger('click');<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.5.1/konva.min.js"></script>
<button style='position: absolute; z-index: 10;' id='reset'>Go</button>
<div id='container1' style="width: 300px, height: 200px; background-color: silver;"></div>
<div id='img'></div>answered Nov 16 '18 at 11:22
Vanquished WombatVanquished Wombat
3,95011338
thank you so much for this clear and detailed answer, especially for also referencing the other snippet. much appreciated.
– florian norbert bepunkt
Nov 16 '18 at 22:48
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53330168%2fanimate-a-shape-along-a-line-or-path-in-konva%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
As you have identified, the Path object has some handy methods in getLength() to find the overall path length and getPointAtLength() which can then be used to find the (x,y) at any given point along the length.
In case it helps anyone, I built the path data from the output of another snippet from this other question.
var data = ["x":34,"y":34,"x":84,"y":64,"x":141,"y":79,"x":181.5,"y":78.5,"x":218,"y":62,"x":223,"y":40,"x":240,"y":26,"x":259.5,"y":25,"x":271,"y":40,"x":292.5,"y":53,"x":311.25,"y":55.5,"x":330.625,"y":46.75,"x":332.3125,"y":30.375,"x":349.15625,"y":10.1875,"x":374.578125,"y":10.09375,"x":392,"y":26,"x":411,"y":36,"x":444.5,"y":37,"x":453.875,"y":27.25,"x":463.25,"y":17.5,"x":472.9375,"y":10.625,"x":494.625,"y":15.75,"x":530,"y":48,"x":534,"y":88,"x":540,"y":150,"x":552,"y":198,"x":544,"y":227,"x":522,"y":256,"x":504.5,"y":263,"x":471,"y":262,"x":448,"y":252,"x":372,"y":214,"x":290,"y":146,"x":256,"y":100,"x":198,"y":104,"x":182,"y":140,"x":204,"y":185,"x":203,"y":201.5,"x":190,"y":214,"x":174.5,"y":218,"x":155,"y":214,"x":124,"y":222,"x":113.5,"y":232.5,"x":95,"y":227,"x":75.5,"y":211.5,"x":72,"y":188,"x":58,"y":136]
// Set up the canvas / stage
var stage = new Konva.Stage(container: 'container1', width: 600, height: 300);
// Add a layer for line
var layer = new Konva.Layer(draggable: false);
stage.add(layer);
// draw a path.
var path = new Konva.Path(
x: 0,
y: 0,
stroke: 'cyan'
);
layer.add(path)
// Load the path points up using M = moveto, L = lineto.
var p = "M" + data[0].x + " " + data[0].y;
for (var i = 1; i < data.length; i = i + 1)
p = p + " L" + data[i].x + " " + data[i].y;
path.setData(p);
// add a circle to be animated along the path
var circle = new Konva.Circle( x: data[0].x, y: data[0].y, radius: 10, fill: 'Magenta');
layer.add(circle);
stage.draw();
$('#reset').on('click', function()
// Now animate a circle along the path
var steps = 50; // number of steps in animation
var pathLen = path.getLength();
var step = pathLen / steps;
var frameCnt = 0, pos =0, pt;
anim = new Konva.Animation(function(frame)
pos = pos + 1;
pt = path.getPointAtLength(pos * step);
circle.position(x: pt.x, y: pt.y);
, layer);
anim.start();
)
$('#reset').trigger('click');<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.5.1/konva.min.js"></script>
<button style='position: absolute; z-index: 10;' id='reset'>Go</button>
<div id='container1' style="width: 300px, height: 200px; background-color: silver;"></div>
<div id='img'></div>answered Nov 16 '18 at 11:22
Vanquished WombatVanquished Wombat
3,95011338
thank you so much for this clear and detailed answer, especially for also referencing the other snippet. much appreciated.
– florian norbert bepunkt
Nov 16 '18 at 22:48
add a comment |
1
As you have identified, the Path object has some handy methods in getLength() to find the overall path length and getPointAtLength() which can then be used to find the (x,y) at any given point along the length.
In case it helps anyone, I built the path data from the output of another snippet from this other question.
var data = ["x":34,"y":34,"x":84,"y":64,"x":141,"y":79,"x":181.5,"y":78.5,"x":218,"y":62,"x":223,"y":40,"x":240,"y":26,"x":259.5,"y":25,"x":271,"y":40,"x":292.5,"y":53,"x":311.25,"y":55.5,"x":330.625,"y":46.75,"x":332.3125,"y":30.375,"x":349.15625,"y":10.1875,"x":374.578125,"y":10.09375,"x":392,"y":26,"x":411,"y":36,"x":444.5,"y":37,"x":453.875,"y":27.25,"x":463.25,"y":17.5,"x":472.9375,"y":10.625,"x":494.625,"y":15.75,"x":530,"y":48,"x":534,"y":88,"x":540,"y":150,"x":552,"y":198,"x":544,"y":227,"x":522,"y":256,"x":504.5,"y":263,"x":471,"y":262,"x":448,"y":252,"x":372,"y":214,"x":290,"y":146,"x":256,"y":100,"x":198,"y":104,"x":182,"y":140,"x":204,"y":185,"x":203,"y":201.5,"x":190,"y":214,"x":174.5,"y":218,"x":155,"y":214,"x":124,"y":222,"x":113.5,"y":232.5,"x":95,"y":227,"x":75.5,"y":211.5,"x":72,"y":188,"x":58,"y":136]
// Set up the canvas / stage
var stage = new Konva.Stage(container: 'container1', width: 600, height: 300);
// Add a layer for line
var layer = new Konva.Layer(draggable: false);
stage.add(layer);
// draw a path.
var path = new Konva.Path(
x: 0,
y: 0,
stroke: 'cyan'
);
layer.add(path)
// Load the path points up using M = moveto, L = lineto.
var p = "M" + data[0].x + " " + data[0].y;
for (var i = 1; i < data.length; i = i + 1)
p = p + " L" + data[i].x + " " + data[i].y;
path.setData(p);
// add a circle to be animated along the path
var circle = new Konva.Circle( x: data[0].x, y: data[0].y, radius: 10, fill: 'Magenta');
layer.add(circle);
stage.draw();
$('#reset').on('click', function()
// Now animate a circle along the path
var steps = 50; // number of steps in animation
var pathLen = path.getLength();
var step = pathLen / steps;
var frameCnt = 0, pos =0, pt;
anim = new Konva.Animation(function(frame)
pos = pos + 1;
pt = path.getPointAtLength(pos * step);
circle.position(x: pt.x, y: pt.y);
, layer);
anim.start();
)
$('#reset').trigger('click');<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.5.1/konva.min.js"></script>
<button style='position: absolute; z-index: 10;' id='reset'>Go</button>
<div id='container1' style="width: 300px, height: 200px; background-color: silver;"></div>
<div id='img'></div>answered Nov 16 '18 at 11:22
Vanquished WombatVanquished Wombat
3,95011338
thank you so much for this clear and detailed answer, especially for also referencing the other snippet. much appreciated.
– florian norbert bepunkt
Nov 16 '18 at 22:48
add a comment |
1
1
1
As you have identified, the Path object has some handy methods in getLength() to find the overall path length and getPointAtLength() which can then be used to find the (x,y) at any given point along the length.
In case it helps anyone, I built the path data from the output of another snippet from this other question.
var data = ["x":34,"y":34,"x":84,"y":64,"x":141,"y":79,"x":181.5,"y":78.5,"x":218,"y":62,"x":223,"y":40,"x":240,"y":26,"x":259.5,"y":25,"x":271,"y":40,"x":292.5,"y":53,"x":311.25,"y":55.5,"x":330.625,"y":46.75,"x":332.3125,"y":30.375,"x":349.15625,"y":10.1875,"x":374.578125,"y":10.09375,"x":392,"y":26,"x":411,"y":36,"x":444.5,"y":37,"x":453.875,"y":27.25,"x":463.25,"y":17.5,"x":472.9375,"y":10.625,"x":494.625,"y":15.75,"x":530,"y":48,"x":534,"y":88,"x":540,"y":150,"x":552,"y":198,"x":544,"y":227,"x":522,"y":256,"x":504.5,"y":263,"x":471,"y":262,"x":448,"y":252,"x":372,"y":214,"x":290,"y":146,"x":256,"y":100,"x":198,"y":104,"x":182,"y":140,"x":204,"y":185,"x":203,"y":201.5,"x":190,"y":214,"x":174.5,"y":218,"x":155,"y":214,"x":124,"y":222,"x":113.5,"y":232.5,"x":95,"y":227,"x":75.5,"y":211.5,"x":72,"y":188,"x":58,"y":136]
// Set up the canvas / stage
var stage = new Konva.Stage(container: 'container1', width: 600, height: 300);
// Add a layer for line
var layer = new Konva.Layer(draggable: false);
stage.add(layer);
// draw a path.
var path = new Konva.Path(
x: 0,
y: 0,
stroke: 'cyan'
);
layer.add(path)
// Load the path points up using M = moveto, L = lineto.
var p = "M" + data[0].x + " " + data[0].y;
for (var i = 1; i < data.length; i = i + 1)
p = p + " L" + data[i].x + " " + data[i].y;
path.setData(p);
// add a circle to be animated along the path
var circle = new Konva.Circle( x: data[0].x, y: data[0].y, radius: 10, fill: 'Magenta');
layer.add(circle);
stage.draw();
$('#reset').on('click', function()
// Now animate a circle along the path
var steps = 50; // number of steps in animation
var pathLen = path.getLength();
var step = pathLen / steps;
var frameCnt = 0, pos =0, pt;
anim = new Konva.Animation(function(frame)
pos = pos + 1;
pt = path.getPointAtLength(pos * step);
circle.position(x: pt.x, y: pt.y);
, layer);
anim.start();
)
$('#reset').trigger('click');<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.5.1/konva.min.js"></script>
<button style='position: absolute; z-index: 10;' id='reset'>Go</button>
<div id='container1' style="width: 300px, height: 200px; background-color: silver;"></div>
<div id='img'></div>answered Nov 16 '18 at 11:22
Vanquished WombatVanquished Wombat
3,95011338
As you have identified, the Path object has some handy methods in getLength() to find the overall path length and getPointAtLength() which can then be used to find the (x,y) at any given point along the length.
In case it helps anyone, I built the path data from the output of another snippet from this other question.
var data = ["x":34,"y":34,"x":84,"y":64,"x":141,"y":79,"x":181.5,"y":78.5,"x":218,"y":62,"x":223,"y":40,"x":240,"y":26,"x":259.5,"y":25,"x":271,"y":40,"x":292.5,"y":53,"x":311.25,"y":55.5,"x":330.625,"y":46.75,"x":332.3125,"y":30.375,"x":349.15625,"y":10.1875,"x":374.578125,"y":10.09375,"x":392,"y":26,"x":411,"y":36,"x":444.5,"y":37,"x":453.875,"y":27.25,"x":463.25,"y":17.5,"x":472.9375,"y":10.625,"x":494.625,"y":15.75,"x":530,"y":48,"x":534,"y":88,"x":540,"y":150,"x":552,"y":198,"x":544,"y":227,"x":522,"y":256,"x":504.5,"y":263,"x":471,"y":262,"x":448,"y":252,"x":372,"y":214,"x":290,"y":146,"x":256,"y":100,"x":198,"y":104,"x":182,"y":140,"x":204,"y":185,"x":203,"y":201.5,"x":190,"y":214,"x":174.5,"y":218,"x":155,"y":214,"x":124,"y":222,"x":113.5,"y":232.5,"x":95,"y":227,"x":75.5,"y":211.5,"x":72,"y":188,"x":58,"y":136]
// Set up the canvas / stage
var stage = new Konva.Stage(container: 'container1', width: 600, height: 300);
// Add a layer for line
var layer = new Konva.Layer(draggable: false);
stage.add(layer);
// draw a path.
var path = new Konva.Path(
x: 0,
y: 0,
stroke: 'cyan'
);
layer.add(path)
// Load the path points up using M = moveto, L = lineto.
var p = "M" + data[0].x + " " + data[0].y;
for (var i = 1; i < data.length; i = i + 1)
p = p + " L" + data[i].x + " " + data[i].y;
path.setData(p);
// add a circle to be animated along the path
var circle = new Konva.Circle( x: data[0].x, y: data[0].y, radius: 10, fill: 'Magenta');
layer.add(circle);
stage.draw();
$('#reset').on('click', function()
// Now animate a circle along the path
var steps = 50; // number of steps in animation
var pathLen = path.getLength();
var step = pathLen / steps;
var frameCnt = 0, pos =0, pt;
anim = new Konva.Animation(function(frame)
pos = pos + 1;
pt = path.getPointAtLength(pos * step);
circle.position(x: pt.x, y: pt.y);
, layer);
anim.start();
)
$('#reset').trigger('click');<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.5.1/konva.min.js"></script>
<button style='position: absolute; z-index: 10;' id='reset'>Go</button>
<div id='container1' style="width: 300px, height: 200px; background-color: silver;"></div>
<div id='img'></div>var data = ["x":34,"y":34,"x":84,"y":64,"x":141,"y":79,"x":181.5,"y":78.5,"x":218,"y":62,"x":223,"y":40,"x":240,"y":26,"x":259.5,"y":25,"x":271,"y":40,"x":292.5,"y":53,"x":311.25,"y":55.5,"x":330.625,"y":46.75,"x":332.3125,"y":30.375,"x":349.15625,"y":10.1875,"x":374.578125,"y":10.09375,"x":392,"y":26,"x":411,"y":36,"x":444.5,"y":37,"x":453.875,"y":27.25,"x":463.25,"y":17.5,"x":472.9375,"y":10.625,"x":494.625,"y":15.75,"x":530,"y":48,"x":534,"y":88,"x":540,"y":150,"x":552,"y":198,"x":544,"y":227,"x":522,"y":256,"x":504.5,"y":263,"x":471,"y":262,"x":448,"y":252,"x":372,"y":214,"x":290,"y":146,"x":256,"y":100,"x":198,"y":104,"x":182,"y":140,"x":204,"y":185,"x":203,"y":201.5,"x":190,"y":214,"x":174.5,"y":218,"x":155,"y":214,"x":124,"y":222,"x":113.5,"y":232.5,"x":95,"y":227,"x":75.5,"y":211.5,"x":72,"y":188,"x":58,"y":136]
// Set up the canvas / stage
var stage = new Konva.Stage(container: 'container1', width: 600, height: 300);
// Add a layer for line
var layer = new Konva.Layer(draggable: false);
stage.add(layer);
// draw a path.
var path = new Konva.Path(
x: 0,
y: 0,
stroke: 'cyan'
);
layer.add(path)
// Load the path points up using M = moveto, L = lineto.
var p = "M" + data[0].x + " " + data[0].y;
for (var i = 1; i < data.length; i = i + 1)
p = p + " L" + data[i].x + " " + data[i].y;
path.setData(p);
// add a circle to be animated along the path
var circle = new Konva.Circle( x: data[0].x, y: data[0].y, radius: 10, fill: 'Magenta');
layer.add(circle);
stage.draw();
$('#reset').on('click', function()
// Now animate a circle along the path
var steps = 50; // number of steps in animation
var pathLen = path.getLength();
var step = pathLen / steps;
var frameCnt = 0, pos =0, pt;
anim = new Konva.Animation(function(frame)
pos = pos + 1;
pt = path.getPointAtLength(pos * step);
circle.position(x: pt.x, y: pt.y);
, layer);
anim.start();
)
$('#reset').trigger('click');<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.5.1/konva.min.js"></script>
<button style='position: absolute; z-index: 10;' id='reset'>Go</button>
<div id='container1' style="width: 300px, height: 200px; background-color: silver;"></div>
<div id='img'></div>var data = ["x":34,"y":34,"x":84,"y":64,"x":141,"y":79,"x":181.5,"y":78.5,"x":218,"y":62,"x":223,"y":40,"x":240,"y":26,"x":259.5,"y":25,"x":271,"y":40,"x":292.5,"y":53,"x":311.25,"y":55.5,"x":330.625,"y":46.75,"x":332.3125,"y":30.375,"x":349.15625,"y":10.1875,"x":374.578125,"y":10.09375,"x":392,"y":26,"x":411,"y":36,"x":444.5,"y":37,"x":453.875,"y":27.25,"x":463.25,"y":17.5,"x":472.9375,"y":10.625,"x":494.625,"y":15.75,"x":530,"y":48,"x":534,"y":88,"x":540,"y":150,"x":552,"y":198,"x":544,"y":227,"x":522,"y":256,"x":504.5,"y":263,"x":471,"y":262,"x":448,"y":252,"x":372,"y":214,"x":290,"y":146,"x":256,"y":100,"x":198,"y":104,"x":182,"y":140,"x":204,"y":185,"x":203,"y":201.5,"x":190,"y":214,"x":174.5,"y":218,"x":155,"y":214,"x":124,"y":222,"x":113.5,"y":232.5,"x":95,"y":227,"x":75.5,"y":211.5,"x":72,"y":188,"x":58,"y":136]
// Set up the canvas / stage
var stage = new Konva.Stage(container: 'container1', width: 600, height: 300);
// Add a layer for line
var layer = new Konva.Layer(draggable: false);
stage.add(layer);
// draw a path.
var path = new Konva.Path(
x: 0,
y: 0,
stroke: 'cyan'
);
layer.add(path)
// Load the path points up using M = moveto, L = lineto.
var p = "M" + data[0].x + " " + data[0].y;
for (var i = 1; i < data.length; i = i + 1)
p = p + " L" + data[i].x + " " + data[i].y;
path.setData(p);
// add a circle to be animated along the path
var circle = new Konva.Circle( x: data[0].x, y: data[0].y, radius: 10, fill: 'Magenta');
layer.add(circle);
stage.draw();
$('#reset').on('click', function()
// Now animate a circle along the path
var steps = 50; // number of steps in animation
var pathLen = path.getLength();
var step = pathLen / steps;
var frameCnt = 0, pos =0, pt;
anim = new Konva.Animation(function(frame)
pos = pos + 1;
pt = path.getPointAtLength(pos * step);
circle.position(x: pt.x, y: pt.y);
, layer);
anim.start();
)
$('#reset').trigger('click');<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.5.1/konva.min.js"></script>
<button style='position: absolute; z-index: 10;' id='reset'>Go</button>
<div id='container1' style="width: 300px, height: 200px; background-color: silver;"></div>
<div id='img'></div>answered Nov 16 '18 at 11:22
Vanquished WombatVanquished Wombat
3,95011338
answered Nov 16 '18 at 11:22
Vanquished WombatVanquished Wombat
3,95011338
answered Nov 16 '18 at 11:22
Vanquished WombatVanquished Wombat
3,95011338
answered Nov 16 '18 at 11:22
Vanquished WombatVanquished Wombat
3,95011338
3,95011338
thank you so much for this clear and detailed answer, especially for also referencing the other snippet. much appreciated.
– florian norbert bepunkt
Nov 16 '18 at 22:48
add a comment |
thank you so much for this clear and detailed answer, especially for also referencing the other snippet. much appreciated.
– florian norbert bepunkt
Nov 16 '18 at 22:48
thank you so much for this clear and detailed answer, especially for also referencing the other snippet. much appreciated.
– florian norbert bepunkt
Nov 16 '18 at 22:48
thank you so much for this clear and detailed answer, especially for also referencing the other snippet. much appreciated.
– florian norbert bepunkt
Nov 16 '18 at 22:48
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53330168%2fanimate-a-shape-along-a-line-or-path-in-konva%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Okay, basically using getPointAtLength(length) and getLength() should allow to get a position of a point on a graph… which then could be animated: konvajs.github.io/api/Konva.Path.html
– florian norbert bepunkt
Nov 16 '18 at 1:58