question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Masking with gradien linear alpha

See original GitHub issue

hi everybody. it’s pretty simple to create a mask with a sprite with a gradient effect on top and bottom (in photoshop). but i would like to know how to make a mask with gradient effect (top,bottom) with PIXI.Graphics for make mask blured or gradient effect.

how i can do this ?

var thing = new PIXI.Graphics();
thing.beginFill(0x8bc5ff,0.4);
thing.lineStyle(0);
thing.drawRect(0, 0, 200, 200);
        mtc.mask = thing;
        console.log('mtc: ', mtc);
    return mtc;

good example here http://www.webdesignerwall.com/demo/css-gradient-text/

would like to add a mask with gradient on my text box to allow the wheel of the mouse to descend or mount the text, but with a small gradient alpha++ effect at the end of the boxes. thank a lot

here the context in video https://youtu.be/VKMYn1fqOq4

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
ivanpopelyshevcommented, Nov 26, 2017

Btw, you can use sprite with PIXI.Texture.WHITE and width=200; height=200 instead of graphics.

Even more, Graphics that you created in this examples uses inner mechanism called “fast rectangles”, it creates a sprite with PIXI.Texture.WHITE inside.

0reactions
lock[bot]commented, Jul 3, 2019

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Masking with gradien linear alpha · Issue #4451 · pixijs/pixijs
hi everybody. it's pretty simple to create a mask with a sprite with a gradient effect on top and bottom (in photoshop).
Read more >
How to create an alpha mask in Sketch
Learn how to work with alpha masks in Sketch to create fade out effects ... of the Inspector and apply a linear gradient...
Read more >
mask-mode | CSS-Tricks
In a simple masking operation, we have an element and a mask image placed on top of it. The alpha value of each...
Read more >
Gradient masks - VEGAS Image - 1 - Manula.com
Gradient masks create a mask with a soft edge, based on a linear black-to-white alpha gradient. Alpha gradients are not visible, but rather,...
Read more >
linear gradient drawing inside an alpha mask - TheBest3D.com
linear gradient drawing inside an alpha mask. ... The gradient tool offers 8 pre-loaded gradients. ... Let's now pick a brush which paints...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found