How to add gradient fill to shapes?

[sangramjagtap]

This is sample slide which I'm trying to export using PptxGenJS

How to add gradient fill to shapes?

[gitbrent]

Hi @sangramjagtap ,

Thanks for the question/issue.

The library does support gradients as of yet. I've added this to the enhancement list.

[sangramjagtap]

Thanks for the clarification.

…

On Wed, Jun 21, 2017 at 8:24 AM, Brent Ely ***@***.***> wrote: Hi @sangramjagtap <https://github.com/sangramjagtap> , Thanks for the question/issue. The library does support gradients as of yet. I've added this to the enhancement list. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#102 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ARCCHKHgUd-ng9TKjjU6ZLkW5dEaB6miks5sGIXngaJpZM4N69Ru> .

-- Thanks & Regards, Sangram M. Jagtap Email: sangramjagtap7@gmail.com <sangram.jagtap@mindstix.com> Phone: +91 844 644 6043 Skype: sangramjagtap7

[pstoll]

fyi - I've implemented this. I'll open up a PR when I get a chance.

Here's an example showing the fill on a slide master as the background.

    pptx.defineSlideMaster( {
	title: 'TITLE_SLIDE',
	bkgd:   { fill: {type:'gradient', stops: [{ pos: 0, color:'C1F15E' }, { pos: 62, color:'90BA3F' }, { pos: 100, color:'7FA03E'}],
			 linearAngle: 90, linearScaled: false}},
	objects: [
	    { 'image':{x:0,y:0,w:"100%", h:"100%", path: 'bee-background.png',
		       sizing: {type: 'cover', x:0, y:0, w:"100%", h:"100%"}}},
	    { 'rect': {x:"50%", y:0, w:'41%', h:"90%", fill:'FFFFFF',
		       line:'74A50F', lineSize:1}},
	    { 'rect': {x:"51%", y:0, w:'39%', h:"30%", fill:'71685A',
		       line:'000000', lineSize:0}},
	    { 'line': {x:"51%", y:"88%", w:'39%',line:'94C601',
		       lineSize:6}},
	    { 'image': { x:"70%", y:"60%", w:2.1, h:2.1, path:'bee-right.png' } }
	]
    });

The way it's implemented, it works on both slide masters and also slide shapes that currently support the 'fill' option, e.g. images and text.

The way the background is currently implemented in slide masters means it would be awfully hard to have both an image and also a fill. That threw me for a while until I realized basically there is no need to specify a background image - just specify fill as the background and then add an image that fills the entire slide.

Here is the slide created from the above:

[pstoll]

@gitbrent you open to a PR on this? if so, anything you're looking for in particular in a PR?

[gitbrent]

Hi @pstoll,

Absolutely, PR's are always welcome.

Content-wise:

• The feature added using the same style the current code is in
• A demo of the feature added to pptxgenjs-demo.js
• A blurb showing the options/sample in the README

[fleebzz]

Hi @pstoll !

You said you implemented this and wanted to open PR. Unfortunately still no PR here 😢.

Do you want some help ? We could try to open the PR with you if you want because we need this feature too 😄

Have a great day !

[jchambondynadmic]

Any news about that ?

[pstoll]

Sorry, lost track of this. Let me see if I can dig this up.

[jchambondynadmic]

Thanks, and so ? :D

[abaroiller]

Hi @pstoll,
Do you have any great news about a PR for gradient background ?

[Ouisticram]

Hello @pstoll,
Any update ? This would be helpful for my app :)

[Alex-Golovin]

The same, need to set gradient to slides

[gitbrent]

Hi All,

It appears Perry hasn't been on GitHub for awhile and the clone he made of the repo was never patched for gradient support.

As the community is interested in this, i've tagged it for triage so i can scope what needs to be coded to support this functionality. I'll circle back after 3.0 is released (soon!).

[hawrancz99]

Hi,
Are there any news? Gradient is still not working :(
Thanks

[ReimaFrgos]

I have an almost complete gradient implementation that I'll submit a PR for. It's functional and supports linear, radial, rectangular, and path gradients.
Still cleaning up some of the code before I create a PR.

[hilnius]

@ReimaFrgos hey, any news on this ? I saw your branch https://github.com/ReimaFrgos/PptxGenJS/tree/92+103-AddGradientSupport there is nothing on it yet, do you need a hand ?

[jencii]

@ReimaFrgos @hilnius I have a partial solution, I would like to help with the issue

[veritas-k]

Hello, this is my first github post so please excuse me if I break protocol. Unless I am mistaken the gradient feature still does not seem to be implemented. Is it still being worked on and or investigated?

Thank you.

[JesseRiemens]

Hi!
@gitbrent @ReimaFrgos do you guys still want to release this feature? If so I'll definitely wait on it, if not I'll work around it!

Thanks :)

[sambauers]

I've pushed this PR if people are interested. I have only done one implementation in the demo suite and haven't modified the docs. If anyone want's to contribute to the PR for those then please go ahead. #1295

This could potentially be used to add gradients to slide backgrounds and object outlines as well.