Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to add gradient fill to shapes? #102

Open
sangramjagtap opened this issue Jun 15, 2017 · 22 comments
Open

How to add gradient fill to shapes? #102

sangramjagtap opened this issue Jun 15, 2017 · 22 comments

Comments

@sangramjagtap
Copy link

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

new common slides

How to add gradient fill to shapes?

@gitbrent gitbrent self-assigned this Jun 21, 2017
@gitbrent
Copy link
Owner

Hi @sangramjagtap ,

Thanks for the question/issue.

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

@sangramjagtap
Copy link
Author

sangramjagtap commented Jun 21, 2017 via email

@pstoll
Copy link

pstoll commented Mar 10, 2018

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

@pstoll
Copy link

pstoll commented Mar 10, 2018

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

@gitbrent
Copy link
Owner

gitbrent commented Mar 11, 2018

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
Copy link

fleebzz commented Dec 5, 2018

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
Copy link

Any news about that ?

@pstoll
Copy link

pstoll commented Jun 25, 2019

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

@jchambondynadmic
Copy link

Thanks, and so ? :D

@abaroiller
Copy link

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

@Ouisticram
Copy link

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

@Alex-Golovin
Copy link

The same, need to set gradient to slides

@gitbrent
Copy link
Owner

gitbrent commented Oct 8, 2019

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
Copy link

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

@ReimaFrgos
Copy link
Contributor

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
Copy link
Contributor

hilnius commented Jan 19, 2021

@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
Copy link

jencii commented Jan 19, 2021

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

@veritas-k
Copy link

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
Copy link

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
Copy link

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.

@vaibhavbhootna
Copy link

@sambauers: I noticed your PR related to the gradient solution for demo purposes. Do you happen to have a more complete solution, or have you made further progress on it since then? Any updates would be greatly appreciated!

@sambauers
Copy link

sambauers commented Oct 31, 2024

No, sorry I haven’t touched it since then. I moved on to a different library for PPTX generation.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests