This is a migrated thread and some comments may be shown as answers.

Use of LinearGradient as Fill Color in drawing shapes

1 Answer 227 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Mike
Top achievements
Rank 1
Mike asked on 03 Jan 2018, 05:54 PM

I'd like to be able to use a linear gradient as a fill color when generate shapes.  However, the TypeScript definition of color in FillOptions is limited to string.  How can I go about solving this? 

 

const gradient = new LinearGradient({
        name: "LG1",
        stops: [
            new GradientStop({
                color: "gray",
                offset: 0,
                opacity: 0
            }),
            new GradientStop({
                offset: 0.5,
                color: "orange",
                opacity: 0.8
            })]
    });

            const geometry = new GeomRectangle([currentStartPoint, 0], [segmentLength, stackedBarWidth]);
            const rect = new Rect(geometry, {
                stroke: { color: "black", width: 1 },
                fill: { color: disp.color, opacity: 1 }
            });

1 Answer, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 04 Jan 2018, 04:20 PM
Hi Mike,

Gradients can indeed be passed as shapes fill options, but we have erroneously documented the GradientStop as a class while it is an interface, and an attempt to create new instances from it via a constructor call will result in an error. Here is an example of using the gradient to fill both a Path, and an Rect:

https://plnkr.co/edit/f6TWdimoz6SNHxpqGKXd?p=preview

I hope this helps, and please accept my apologies for any inconvenience the issue in our documentation have caused. We will make sure to update it as soon as possible.

Regards,
Dimiter Topalov
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
General Discussions
Asked by
Mike
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Share this question
or