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 :)