Mixing
How to apply gradient color for an image using createjs?
How to apply gradient fill using createjs? Below is the code for creating loading the image and i have changed the color using color filter but i want to apply the gradient color
let rightContainer = new createjs.Container();
let rightMain = new window.createjs.Bitmap(rightImage);
// leftMain.scaleX = 800 / leftMain.image.width;
rightMain.scaleY = 800 / rightMain.image.height;
rightContainer.addChild(rightMain);
rightMain.x = 300;
rightMain.y = 0;
this.layerImage = rightMain.clone();
this.layerImage.alpha = 0.15;
rightContainer.addChild(this.layerImage);
rightMain.filters = [new window.createjs.ColorFilter(0, 0, 0, 1, 117, 111, 115, 0)];
rightContainer.main = rightMain;
rightMain.cache(0, 0, rightMain.image.width, rightMain.image.height);
rightContainer.visible = false;
this.stage.addChild(rightContainer);
javascript html5-canvas createjs
asked Jan 1 at 15:42
Pradeep Prabhu B RPradeep Prabhu B R
15011
add a comment |
How to apply gradient fill using createjs? Below is the code for creating loading the image and i have changed the color using color filter but i want to apply the gradient color
let rightContainer = new createjs.Container();
let rightMain = new window.createjs.Bitmap(rightImage);
// leftMain.scaleX = 800 / leftMain.image.width;
rightMain.scaleY = 800 / rightMain.image.height;
rightContainer.addChild(rightMain);
rightMain.x = 300;
rightMain.y = 0;
this.layerImage = rightMain.clone();
this.layerImage.alpha = 0.15;
rightContainer.addChild(this.layerImage);
rightMain.filters = [new window.createjs.ColorFilter(0, 0, 0, 1, 117, 111, 115, 0)];
rightContainer.main = rightMain;
rightMain.cache(0, 0, rightMain.image.width, rightMain.image.height);
rightContainer.visible = false;
this.stage.addChild(rightContainer);
javascript html5-canvas createjs
asked Jan 1 at 15:42
Pradeep Prabhu B RPradeep Prabhu B R
15011
add a comment |
How to apply gradient fill using createjs? Below is the code for creating loading the image and i have changed the color using color filter but i want to apply the gradient color
let rightContainer = new createjs.Container();
let rightMain = new window.createjs.Bitmap(rightImage);
// leftMain.scaleX = 800 / leftMain.image.width;
rightMain.scaleY = 800 / rightMain.image.height;
rightContainer.addChild(rightMain);
rightMain.x = 300;
rightMain.y = 0;
this.layerImage = rightMain.clone();
this.layerImage.alpha = 0.15;
rightContainer.addChild(this.layerImage);
rightMain.filters = [new window.createjs.ColorFilter(0, 0, 0, 1, 117, 111, 115, 0)];
rightContainer.main = rightMain;
rightMain.cache(0, 0, rightMain.image.width, rightMain.image.height);
rightContainer.visible = false;
this.stage.addChild(rightContainer);
javascript html5-canvas createjs
asked Jan 1 at 15:42
Pradeep Prabhu B RPradeep Prabhu B R
15011
How to apply gradient fill using createjs? Below is the code for creating loading the image and i have changed the color using color filter but i want to apply the gradient color
let rightContainer = new createjs.Container();
let rightMain = new window.createjs.Bitmap(rightImage);
// leftMain.scaleX = 800 / leftMain.image.width;
rightMain.scaleY = 800 / rightMain.image.height;
rightContainer.addChild(rightMain);
rightMain.x = 300;
rightMain.y = 0;
this.layerImage = rightMain.clone();
this.layerImage.alpha = 0.15;
rightContainer.addChild(this.layerImage);
rightMain.filters = [new window.createjs.ColorFilter(0, 0, 0, 1, 117, 111, 115, 0)];
rightContainer.main = rightMain;
rightMain.cache(0, 0, rightMain.image.width, rightMain.image.height);
rightContainer.visible = false;
this.stage.addChild(rightContainer);
javascript html5-canvas createjs
javascript html5-canvas createjs
asked Jan 1 at 15:42
Pradeep Prabhu B RPradeep Prabhu B R
15011
asked Jan 1 at 15:42
Pradeep Prabhu B RPradeep Prabhu B R
15011
asked Jan 1 at 15:42
Pradeep Prabhu B RPradeep Prabhu B R
15011
asked Jan 1 at 15:42
Pradeep Prabhu B RPradeep Prabhu B R
15011
asked Jan 1 at 15:42
Pradeep Prabhu B RPradeep Prabhu B R
15011
15011
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
What exactly are you trying to do? Apply a gradient on the color filtered image?
An approach you could use is:
- Draw a box with a gradient in it
- Cache it so it can be used as an AlphaMaskFilter
- Apply it to the bitmap as a filter
- Cache the bitmap to apply the filter.
I made an demo to show how it would work:
https://jsfiddle.net/lannymcnie/uog3hkpd/2/
// Draw a gradient in a shape:
s.graphics.lf(["#000", "rgba(0,0,0,0)"], [0, 0], 0,0,960,0);
// Cache the shape
s.cache(0,0,960,400);
// Add the alphamaskfilter + a color adjustment for fun
var col = new createjs.ColorMatrix().adjustHue(180);
bmp.filters = [
new createjs.AlphaMaskFilter(s.cacheCanvas),
new createjs.ColorMatrixFilter(col)
];
// Cache it to apply filters
bmp.cache(0,0,960,400);
The demo does a few other things, such as
- Adding a second bmp underneath that is not filtered
- Animating the ratio of the gradient (requires a re-cache)
I hope that helps you with your question. If you have any specific code or examples you need help with, please feel free to clarify.
Cheers,
answered Jan 1 at 19:13
LannyLanny
9,69611530
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%2f53996758%2fhow-to-apply-gradient-color-for-an-image-using-createjs%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
What exactly are you trying to do? Apply a gradient on the color filtered image?
An approach you could use is:
- Draw a box with a gradient in it
- Cache it so it can be used as an AlphaMaskFilter
- Apply it to the bitmap as a filter
- Cache the bitmap to apply the filter.
I made an demo to show how it would work:
https://jsfiddle.net/lannymcnie/uog3hkpd/2/
// Draw a gradient in a shape:
s.graphics.lf(["#000", "rgba(0,0,0,0)"], [0, 0], 0,0,960,0);
// Cache the shape
s.cache(0,0,960,400);
// Add the alphamaskfilter + a color adjustment for fun
var col = new createjs.ColorMatrix().adjustHue(180);
bmp.filters = [
new createjs.AlphaMaskFilter(s.cacheCanvas),
new createjs.ColorMatrixFilter(col)
];
// Cache it to apply filters
bmp.cache(0,0,960,400);
The demo does a few other things, such as
- Adding a second bmp underneath that is not filtered
- Animating the ratio of the gradient (requires a re-cache)
I hope that helps you with your question. If you have any specific code or examples you need help with, please feel free to clarify.
Cheers,
answered Jan 1 at 19:13
LannyLanny
9,69611530
add a comment |
What exactly are you trying to do? Apply a gradient on the color filtered image?
An approach you could use is:
- Draw a box with a gradient in it
- Cache it so it can be used as an AlphaMaskFilter
- Apply it to the bitmap as a filter
- Cache the bitmap to apply the filter.
I made an demo to show how it would work:
https://jsfiddle.net/lannymcnie/uog3hkpd/2/
// Draw a gradient in a shape:
s.graphics.lf(["#000", "rgba(0,0,0,0)"], [0, 0], 0,0,960,0);
// Cache the shape
s.cache(0,0,960,400);
// Add the alphamaskfilter + a color adjustment for fun
var col = new createjs.ColorMatrix().adjustHue(180);
bmp.filters = [
new createjs.AlphaMaskFilter(s.cacheCanvas),
new createjs.ColorMatrixFilter(col)
];
// Cache it to apply filters
bmp.cache(0,0,960,400);
The demo does a few other things, such as
- Adding a second bmp underneath that is not filtered
- Animating the ratio of the gradient (requires a re-cache)
I hope that helps you with your question. If you have any specific code or examples you need help with, please feel free to clarify.
Cheers,
answered Jan 1 at 19:13
LannyLanny
9,69611530
add a comment |
What exactly are you trying to do? Apply a gradient on the color filtered image?
An approach you could use is:
- Draw a box with a gradient in it
- Cache it so it can be used as an AlphaMaskFilter
- Apply it to the bitmap as a filter
- Cache the bitmap to apply the filter.
I made an demo to show how it would work:
https://jsfiddle.net/lannymcnie/uog3hkpd/2/
// Draw a gradient in a shape:
s.graphics.lf(["#000", "rgba(0,0,0,0)"], [0, 0], 0,0,960,0);
// Cache the shape
s.cache(0,0,960,400);
// Add the alphamaskfilter + a color adjustment for fun
var col = new createjs.ColorMatrix().adjustHue(180);
bmp.filters = [
new createjs.AlphaMaskFilter(s.cacheCanvas),
new createjs.ColorMatrixFilter(col)
];
// Cache it to apply filters
bmp.cache(0,0,960,400);
The demo does a few other things, such as
- Adding a second bmp underneath that is not filtered
- Animating the ratio of the gradient (requires a re-cache)
I hope that helps you with your question. If you have any specific code or examples you need help with, please feel free to clarify.
Cheers,
answered Jan 1 at 19:13
LannyLanny
9,69611530
What exactly are you trying to do? Apply a gradient on the color filtered image?
An approach you could use is:
- Draw a box with a gradient in it
- Cache it so it can be used as an AlphaMaskFilter
- Apply it to the bitmap as a filter
- Cache the bitmap to apply the filter.
I made an demo to show how it would work:
https://jsfiddle.net/lannymcnie/uog3hkpd/2/
// Draw a gradient in a shape:
s.graphics.lf(["#000", "rgba(0,0,0,0)"], [0, 0], 0,0,960,0);
// Cache the shape
s.cache(0,0,960,400);
// Add the alphamaskfilter + a color adjustment for fun
var col = new createjs.ColorMatrix().adjustHue(180);
bmp.filters = [
new createjs.AlphaMaskFilter(s.cacheCanvas),
new createjs.ColorMatrixFilter(col)
];
// Cache it to apply filters
bmp.cache(0,0,960,400);
The demo does a few other things, such as
- Adding a second bmp underneath that is not filtered
- Animating the ratio of the gradient (requires a re-cache)
I hope that helps you with your question. If you have any specific code or examples you need help with, please feel free to clarify.
Cheers,
answered Jan 1 at 19:13
LannyLanny
9,69611530
edited Jan 3 at 1:44
answered Jan 1 at 19:13
LannyLanny
9,69611530
answered Jan 1 at 19:13
LannyLanny
9,69611530
answered Jan 1 at 19:13
LannyLanny
9,69611530
9,69611530
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.
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%2f53996758%2fhow-to-apply-gradient-color-for-an-image-using-createjs%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
