All previous shapes show up while adding another shape in konvajs
I'm facing an issue with konvajs. I am able to draw things and they save all fine to be played with the end video.
However, Let's say I pause the video at 0:30 to add a circle and save it, and then I want to add another shape at 01:30, as soon as I start adding another shape the circle I added before also shows up on screen. So everytime I try and add a shape, I can see all the previous shapes on the screen.
Note: Problem is in adding the shapes, the end video plays fine (circle at 0:30 and another shape at 01:30). Is there any event that I can call to avoid this? Any help will be appreciated.
annotations html5-canvas video-processing konvajs
asked Nov 21 '18 at 7:01
Jagatveer SinghJagatveer Singh
115110
add a comment |
I'm facing an issue with konvajs. I am able to draw things and they save all fine to be played with the end video.
However, Let's say I pause the video at 0:30 to add a circle and save it, and then I want to add another shape at 01:30, as soon as I start adding another shape the circle I added before also shows up on screen. So everytime I try and add a shape, I can see all the previous shapes on the screen.
Note: Problem is in adding the shapes, the end video plays fine (circle at 0:30 and another shape at 01:30). Is there any event that I can call to avoid this? Any help will be appreciated.
annotations html5-canvas video-processing konvajs
asked Nov 21 '18 at 7:01
Jagatveer SinghJagatveer Singh
115110
Please post a Minimal, Complete, and Verifiable example of your issue. Do not link to full code elsewhere as such links are liable to break over time. You are asking busy experts to invest their time to help you - respect this and explain your issue clearly. As well-meant advice, it is most likely that this is a bug of your own making as Konvajs generally works fine.
– Vanquished Wombat
Nov 21 '18 at 9:45
@VanquishedWombat That was meant to give details, not waste anyone's time. Hope the following is worth answering? Even if I call to hide or reduce the opacity to 0 while adding another object. How do I avoid saving visibility change?? Or can you recommend another alternate for videos to handle this UX challenge in a better way?
– Jagatveer Singh
Nov 21 '18 at 9:56
How are you saving the canvas contents?
– Vanquished Wombat
Nov 21 '18 at 9:59
I get element data in the canvas and save it directly, this is why I got the thought that it might try to capture the hide or opacity change too :/ small gist if you want to have a look gist.github.com/Jagatveer/318c6ff3643d7bbd15b3749c03796f2f
– Jagatveer Singh
Nov 21 '18 at 10:34
Overall, canvas has no timeline - you will need to handle the show/hide yourself.
– Vanquished Wombat
Nov 21 '18 at 10:47
add a comment |
I'm facing an issue with konvajs. I am able to draw things and they save all fine to be played with the end video.
However, Let's say I pause the video at 0:30 to add a circle and save it, and then I want to add another shape at 01:30, as soon as I start adding another shape the circle I added before also shows up on screen. So everytime I try and add a shape, I can see all the previous shapes on the screen.
Note: Problem is in adding the shapes, the end video plays fine (circle at 0:30 and another shape at 01:30). Is there any event that I can call to avoid this? Any help will be appreciated.
annotations html5-canvas video-processing konvajs
asked Nov 21 '18 at 7:01
Jagatveer SinghJagatveer Singh
115110
I'm facing an issue with konvajs. I am able to draw things and they save all fine to be played with the end video.
However, Let's say I pause the video at 0:30 to add a circle and save it, and then I want to add another shape at 01:30, as soon as I start adding another shape the circle I added before also shows up on screen. So everytime I try and add a shape, I can see all the previous shapes on the screen.
Note: Problem is in adding the shapes, the end video plays fine (circle at 0:30 and another shape at 01:30). Is there any event that I can call to avoid this? Any help will be appreciated.
annotations html5-canvas video-processing konvajs
annotations html5-canvas video-processing konvajs
asked Nov 21 '18 at 7:01
Jagatveer SinghJagatveer Singh
115110
asked Nov 21 '18 at 7:01
Jagatveer SinghJagatveer Singh
115110
asked Nov 21 '18 at 7:01
Jagatveer SinghJagatveer Singh
115110
asked Nov 21 '18 at 7:01
Jagatveer SinghJagatveer Singh
115110
asked Nov 21 '18 at 7:01
Jagatveer SinghJagatveer Singh
115110
115110
Please post a Minimal, Complete, and Verifiable example of your issue. Do not link to full code elsewhere as such links are liable to break over time. You are asking busy experts to invest their time to help you - respect this and explain your issue clearly. As well-meant advice, it is most likely that this is a bug of your own making as Konvajs generally works fine.
– Vanquished Wombat
Nov 21 '18 at 9:45
@VanquishedWombat That was meant to give details, not waste anyone's time. Hope the following is worth answering? Even if I call to hide or reduce the opacity to 0 while adding another object. How do I avoid saving visibility change?? Or can you recommend another alternate for videos to handle this UX challenge in a better way?
– Jagatveer Singh
Nov 21 '18 at 9:56
How are you saving the canvas contents?
– Vanquished Wombat
Nov 21 '18 at 9:59
I get element data in the canvas and save it directly, this is why I got the thought that it might try to capture the hide or opacity change too :/ small gist if you want to have a look gist.github.com/Jagatveer/318c6ff3643d7bbd15b3749c03796f2f
– Jagatveer Singh
Nov 21 '18 at 10:34
Overall, canvas has no timeline - you will need to handle the show/hide yourself.
– Vanquished Wombat
Nov 21 '18 at 10:47
add a comment |
Please post a Minimal, Complete, and Verifiable example of your issue. Do not link to full code elsewhere as such links are liable to break over time. You are asking busy experts to invest their time to help you - respect this and explain your issue clearly. As well-meant advice, it is most likely that this is a bug of your own making as Konvajs generally works fine.
– Vanquished Wombat
Nov 21 '18 at 9:45
@VanquishedWombat That was meant to give details, not waste anyone's time. Hope the following is worth answering? Even if I call to hide or reduce the opacity to 0 while adding another object. How do I avoid saving visibility change?? Or can you recommend another alternate for videos to handle this UX challenge in a better way?
– Jagatveer Singh
Nov 21 '18 at 9:56
How are you saving the canvas contents?
– Vanquished Wombat
Nov 21 '18 at 9:59
I get element data in the canvas and save it directly, this is why I got the thought that it might try to capture the hide or opacity change too :/ small gist if you want to have a look gist.github.com/Jagatveer/318c6ff3643d7bbd15b3749c03796f2f
– Jagatveer Singh
Nov 21 '18 at 10:34
Overall, canvas has no timeline - you will need to handle the show/hide yourself.
– Vanquished Wombat
Nov 21 '18 at 10:47
Please post a Minimal, Complete, and Verifiable example of your issue. Do not link to full code elsewhere as such links are liable to break over time. You are asking busy experts to invest their time to help you - respect this and explain your issue clearly. As well-meant advice, it is most likely that this is a bug of your own making as Konvajs generally works fine.
– Vanquished Wombat
Nov 21 '18 at 9:45
Please post a Minimal, Complete, and Verifiable example of your issue. Do not link to full code elsewhere as such links are liable to break over time. You are asking busy experts to invest their time to help you - respect this and explain your issue clearly. As well-meant advice, it is most likely that this is a bug of your own making as Konvajs generally works fine.
– Vanquished Wombat
Nov 21 '18 at 9:45
@VanquishedWombat That was meant to give details, not waste anyone's time. Hope the following is worth answering? Even if I call to hide or reduce the opacity to 0 while adding another object. How do I avoid saving visibility change?? Or can you recommend another alternate for videos to handle this UX challenge in a better way?
– Jagatveer Singh
Nov 21 '18 at 9:56
@VanquishedWombat That was meant to give details, not waste anyone's time. Hope the following is worth answering? Even if I call to hide or reduce the opacity to 0 while adding another object. How do I avoid saving visibility change?? Or can you recommend another alternate for videos to handle this UX challenge in a better way?
– Jagatveer Singh
Nov 21 '18 at 9:56
How are you saving the canvas contents?
– Vanquished Wombat
Nov 21 '18 at 9:59
How are you saving the canvas contents?
– Vanquished Wombat
Nov 21 '18 at 9:59
I get element data in the canvas and save it directly, this is why I got the thought that it might try to capture the hide or opacity change too :/ small gist if you want to have a look gist.github.com/Jagatveer/318c6ff3643d7bbd15b3749c03796f2f
– Jagatveer Singh
Nov 21 '18 at 10:34
I get element data in the canvas and save it directly, this is why I got the thought that it might try to capture the hide or opacity change too :/ small gist if you want to have a look gist.github.com/Jagatveer/318c6ff3643d7bbd15b3749c03796f2f
– Jagatveer Singh
Nov 21 '18 at 10:34
Overall, canvas has no timeline - you will need to handle the show/hide yourself.
– Vanquished Wombat
Nov 21 '18 at 10:47
Overall, canvas has no timeline - you will need to handle the show/hide yourself.
– Vanquished Wombat
Nov 21 '18 at 10:47
add a comment |
1 Answer
1
active
oldest
votes
When you add a shape into the layer, you just need to hide/remove previous shapes.
You can do something like this:
oldShape.destroy();
// or remove all previous shapes
layer.destroyChildren();
// then
layer.add(newShape);
layer.draw();
answered Nov 21 '18 at 13:38
lavrtonlavrton
7,22721231
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
});
}
});
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%2f53406796%2fall-previous-shapes-show-up-while-adding-another-shape-in-konvajs%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
When you add a shape into the layer, you just need to hide/remove previous shapes.
You can do something like this:
oldShape.destroy();
// or remove all previous shapes
layer.destroyChildren();
// then
layer.add(newShape);
layer.draw();
answered Nov 21 '18 at 13:38
lavrtonlavrton
7,22721231
add a comment |
When you add a shape into the layer, you just need to hide/remove previous shapes.
You can do something like this:
oldShape.destroy();
// or remove all previous shapes
layer.destroyChildren();
// then
layer.add(newShape);
layer.draw();
answered Nov 21 '18 at 13:38
lavrtonlavrton
7,22721231
add a comment |
When you add a shape into the layer, you just need to hide/remove previous shapes.
You can do something like this:
oldShape.destroy();
// or remove all previous shapes
layer.destroyChildren();
// then
layer.add(newShape);
layer.draw();
answered Nov 21 '18 at 13:38
lavrtonlavrton
7,22721231
When you add a shape into the layer, you just need to hide/remove previous shapes.
You can do something like this:
oldShape.destroy();
// or remove all previous shapes
layer.destroyChildren();
// then
layer.add(newShape);
layer.draw();
answered Nov 21 '18 at 13:38
lavrtonlavrton
7,22721231
answered Nov 21 '18 at 13:38
lavrtonlavrton
7,22721231
answered Nov 21 '18 at 13:38
lavrtonlavrton
7,22721231
answered Nov 21 '18 at 13:38
lavrtonlavrton
7,22721231
7,22721231
add a comment |
add a comment |
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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.
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%2f53406796%2fall-previous-shapes-show-up-while-adding-another-shape-in-konvajs%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
Please post a Minimal, Complete, and Verifiable example of your issue. Do not link to full code elsewhere as such links are liable to break over time. You are asking busy experts to invest their time to help you - respect this and explain your issue clearly. As well-meant advice, it is most likely that this is a bug of your own making as Konvajs generally works fine.
– Vanquished Wombat
Nov 21 '18 at 9:45
@VanquishedWombat That was meant to give details, not waste anyone's time. Hope the following is worth answering? Even if I call to hide or reduce the opacity to 0 while adding another object. How do I avoid saving visibility change?? Or can you recommend another alternate for videos to handle this UX challenge in a better way?
– Jagatveer Singh
Nov 21 '18 at 9:56
How are you saving the canvas contents?
– Vanquished Wombat
Nov 21 '18 at 9:59
I get element data in the canvas and save it directly, this is why I got the thought that it might try to capture the hide or opacity change too :/ small gist if you want to have a look gist.github.com/Jagatveer/318c6ff3643d7bbd15b3749c03796f2f
– Jagatveer Singh
Nov 21 '18 at 10:34
Overall, canvas has no timeline - you will need to handle the show/hide yourself.
– Vanquished Wombat
Nov 21 '18 at 10:47