Mixing
How to draw to a cacheCanvas from a source other than the cached object in EaselJS / CreateJS?
I have a Shape that is cached and a Bitmap made from the shape's cacheCanvas. I now want to draw another Bitmap to the cacheCanvas or more particular, another Bitmap's cacheCanvas to the shape's cacheCanvas. I tried bitmap2.draw(shape.cacheCanvas) and it did not work - even though draw() says it receives a ctx and I think the shape's cacheCanvas is a ctx. It is giving me a drawImage is not a function error.
The reason I am doing this is for a drawing tool's undo functionality. I draw in the shape and blit with sourceover to a Bitmap for display and to a thumbnail Bitmap as there are multiple layers. On pressup I store a new Bitmap from the shape's cacheCanvas and cache it to remember the undo state. These give me the drawings at each pressup. To undo, I want to clear the drawing and cache it without sourceover and then draw the undo Bitmap into the shape's cache canvas. This keeps the relationship between the original shape, the original Bitmap and the thumb Bitmap. It is drawing to the shape's cacheCanvas that is the problem. Is there a way? Thanks!!
ADDED - I think I found a work-around. I can start with a Container with a Shape in it. Then blit the container to the Bitmap. Then when I want to go back to a certain stored Bitmap, I can clear the shape graphic and add the Bitmap to the container - blit that and remove the stored Bitmap. It would still be interesting to know if there is a way to write to a cacheCanvas with something other than the cached object.
caching bitmap createjs easeljs undo-redo
asked Nov 19 '18 at 17:21
Dan Zen
16118
add a comment |
I have a Shape that is cached and a Bitmap made from the shape's cacheCanvas. I now want to draw another Bitmap to the cacheCanvas or more particular, another Bitmap's cacheCanvas to the shape's cacheCanvas. I tried bitmap2.draw(shape.cacheCanvas) and it did not work - even though draw() says it receives a ctx and I think the shape's cacheCanvas is a ctx. It is giving me a drawImage is not a function error.
The reason I am doing this is for a drawing tool's undo functionality. I draw in the shape and blit with sourceover to a Bitmap for display and to a thumbnail Bitmap as there are multiple layers. On pressup I store a new Bitmap from the shape's cacheCanvas and cache it to remember the undo state. These give me the drawings at each pressup. To undo, I want to clear the drawing and cache it without sourceover and then draw the undo Bitmap into the shape's cache canvas. This keeps the relationship between the original shape, the original Bitmap and the thumb Bitmap. It is drawing to the shape's cacheCanvas that is the problem. Is there a way? Thanks!!
ADDED - I think I found a work-around. I can start with a Container with a Shape in it. Then blit the container to the Bitmap. Then when I want to go back to a certain stored Bitmap, I can clear the shape graphic and add the Bitmap to the container - blit that and remove the stored Bitmap. It would still be interesting to know if there is a way to write to a cacheCanvas with something other than the cached object.
caching bitmap createjs easeljs undo-redo
asked Nov 19 '18 at 17:21
Dan Zen
16118
add a comment |
I have a Shape that is cached and a Bitmap made from the shape's cacheCanvas. I now want to draw another Bitmap to the cacheCanvas or more particular, another Bitmap's cacheCanvas to the shape's cacheCanvas. I tried bitmap2.draw(shape.cacheCanvas) and it did not work - even though draw() says it receives a ctx and I think the shape's cacheCanvas is a ctx. It is giving me a drawImage is not a function error.
The reason I am doing this is for a drawing tool's undo functionality. I draw in the shape and blit with sourceover to a Bitmap for display and to a thumbnail Bitmap as there are multiple layers. On pressup I store a new Bitmap from the shape's cacheCanvas and cache it to remember the undo state. These give me the drawings at each pressup. To undo, I want to clear the drawing and cache it without sourceover and then draw the undo Bitmap into the shape's cache canvas. This keeps the relationship between the original shape, the original Bitmap and the thumb Bitmap. It is drawing to the shape's cacheCanvas that is the problem. Is there a way? Thanks!!
ADDED - I think I found a work-around. I can start with a Container with a Shape in it. Then blit the container to the Bitmap. Then when I want to go back to a certain stored Bitmap, I can clear the shape graphic and add the Bitmap to the container - blit that and remove the stored Bitmap. It would still be interesting to know if there is a way to write to a cacheCanvas with something other than the cached object.
caching bitmap createjs easeljs undo-redo
asked Nov 19 '18 at 17:21
Dan Zen
16118
I have a Shape that is cached and a Bitmap made from the shape's cacheCanvas. I now want to draw another Bitmap to the cacheCanvas or more particular, another Bitmap's cacheCanvas to the shape's cacheCanvas. I tried bitmap2.draw(shape.cacheCanvas) and it did not work - even though draw() says it receives a ctx and I think the shape's cacheCanvas is a ctx. It is giving me a drawImage is not a function error.
The reason I am doing this is for a drawing tool's undo functionality. I draw in the shape and blit with sourceover to a Bitmap for display and to a thumbnail Bitmap as there are multiple layers. On pressup I store a new Bitmap from the shape's cacheCanvas and cache it to remember the undo state. These give me the drawings at each pressup. To undo, I want to clear the drawing and cache it without sourceover and then draw the undo Bitmap into the shape's cache canvas. This keeps the relationship between the original shape, the original Bitmap and the thumb Bitmap. It is drawing to the shape's cacheCanvas that is the problem. Is there a way? Thanks!!
ADDED - I think I found a work-around. I can start with a Container with a Shape in it. Then blit the container to the Bitmap. Then when I want to go back to a certain stored Bitmap, I can clear the shape graphic and add the Bitmap to the container - blit that and remove the stored Bitmap. It would still be interesting to know if there is a way to write to a cacheCanvas with something other than the cached object.
caching bitmap createjs easeljs undo-redo
caching bitmap createjs easeljs undo-redo
asked Nov 19 '18 at 17:21
Dan Zen
16118
asked Nov 19 '18 at 17:21
Dan Zen
16118
edited Nov 20 '18 at 1:38
asked Nov 19 '18 at 17:21
Dan Zen
16118
asked Nov 19 '18 at 17:21
Dan Zen
16118
asked Nov 19 '18 at 17:21
Dan Zen
16118
16118
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Drawing to a cache canvas is not enough, you have to make sure to update the stage that is drawing it.
Another approach to give you more control is to just wrap your cacheCanvas in another Stage. This lets you add content to it with the same control as the EaselJS stage. Note that it will clear the caches original contents when you update it, so its not a perfect solution.
https://jsfiddle.net/lannymcnie/8yczqt05/
var stage2 = new createjs.Stage(s.cacheCanvas);
stage2.autoClear = false; // Keep the current cache. Just for this demo
var s2 = new createjs.Shape();
s2.graphics.f("blue").dc(50,50,50);
stage2.addChild(s2);
stage2.update();
If you are making an undo/redo system you might consider a more robust solution, instead of relying on a Shape's cache. It sounds like you are already exploring a Container for the cache, hope you find success with that.
Cheers!
answered Nov 22 '18 at 14:06
Lanny
9,58111429
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%2f53379733%2fhow-to-draw-to-a-cachecanvas-from-a-source-other-than-the-cached-object-in-easel%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
Drawing to a cache canvas is not enough, you have to make sure to update the stage that is drawing it.
Another approach to give you more control is to just wrap your cacheCanvas in another Stage. This lets you add content to it with the same control as the EaselJS stage. Note that it will clear the caches original contents when you update it, so its not a perfect solution.
https://jsfiddle.net/lannymcnie/8yczqt05/
var stage2 = new createjs.Stage(s.cacheCanvas);
stage2.autoClear = false; // Keep the current cache. Just for this demo
var s2 = new createjs.Shape();
s2.graphics.f("blue").dc(50,50,50);
stage2.addChild(s2);
stage2.update();
If you are making an undo/redo system you might consider a more robust solution, instead of relying on a Shape's cache. It sounds like you are already exploring a Container for the cache, hope you find success with that.
Cheers!
answered Nov 22 '18 at 14:06
Lanny
9,58111429
add a comment |
Drawing to a cache canvas is not enough, you have to make sure to update the stage that is drawing it.
Another approach to give you more control is to just wrap your cacheCanvas in another Stage. This lets you add content to it with the same control as the EaselJS stage. Note that it will clear the caches original contents when you update it, so its not a perfect solution.
https://jsfiddle.net/lannymcnie/8yczqt05/
var stage2 = new createjs.Stage(s.cacheCanvas);
stage2.autoClear = false; // Keep the current cache. Just for this demo
var s2 = new createjs.Shape();
s2.graphics.f("blue").dc(50,50,50);
stage2.addChild(s2);
stage2.update();
If you are making an undo/redo system you might consider a more robust solution, instead of relying on a Shape's cache. It sounds like you are already exploring a Container for the cache, hope you find success with that.
Cheers!
answered Nov 22 '18 at 14:06
Lanny
9,58111429
add a comment |
Drawing to a cache canvas is not enough, you have to make sure to update the stage that is drawing it.
Another approach to give you more control is to just wrap your cacheCanvas in another Stage. This lets you add content to it with the same control as the EaselJS stage. Note that it will clear the caches original contents when you update it, so its not a perfect solution.
https://jsfiddle.net/lannymcnie/8yczqt05/
var stage2 = new createjs.Stage(s.cacheCanvas);
stage2.autoClear = false; // Keep the current cache. Just for this demo
var s2 = new createjs.Shape();
s2.graphics.f("blue").dc(50,50,50);
stage2.addChild(s2);
stage2.update();
If you are making an undo/redo system you might consider a more robust solution, instead of relying on a Shape's cache. It sounds like you are already exploring a Container for the cache, hope you find success with that.
Cheers!
answered Nov 22 '18 at 14:06
Lanny
9,58111429
Drawing to a cache canvas is not enough, you have to make sure to update the stage that is drawing it.
Another approach to give you more control is to just wrap your cacheCanvas in another Stage. This lets you add content to it with the same control as the EaselJS stage. Note that it will clear the caches original contents when you update it, so its not a perfect solution.
https://jsfiddle.net/lannymcnie/8yczqt05/
var stage2 = new createjs.Stage(s.cacheCanvas);
stage2.autoClear = false; // Keep the current cache. Just for this demo
var s2 = new createjs.Shape();
s2.graphics.f("blue").dc(50,50,50);
stage2.addChild(s2);
stage2.update();
If you are making an undo/redo system you might consider a more robust solution, instead of relying on a Shape's cache. It sounds like you are already exploring a Container for the cache, hope you find success with that.
Cheers!
answered Nov 22 '18 at 14:06
Lanny
9,58111429
answered Nov 22 '18 at 14:06
Lanny
9,58111429
answered Nov 22 '18 at 14:06
Lanny
9,58111429
answered Nov 22 '18 at 14:06
Lanny
9,58111429
9,58111429
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%2f53379733%2fhow-to-draw-to-a-cachecanvas-from-a-source-other-than-the-cached-object-in-easel%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
