CODEWITHSUNDEEP
javascriptsvgcreatejslinear-gradients
user3200548
user3200548

Reputation: 111

Createjs apply linear gradient stroke

Coding a web app using Createjs, instead of Kinetics. I'm interested in createjs SVG. Anyway, I don't know if I'm wasting my time switching. I'm simply trying to add a stroke to a linear gradient button. Kinetics is easy, createjs, not so.

I don't understand why they include many different classes for the same thing (rectangle, graphics.rect, shape). Here you go. I'm trying to chain the calls.

var bttn = new c.Shape();
        bttn.graphics.beginLinearGradientFill(["blue", "white"], [.2, .9], 0, 0,0,50 ).drawRoundRect(100, 10, 80, 35,5).setStrokeStyle(13).beginLinearGradientStroke(["black", "blue"], [.2, .9], 0, 0,0,50 );

However, when I run it, I get the rectangle with the gradient, but no stroke. Looking at the docs, they post the format of the property beginLinearGradientStroke and apply it to a new rectangle, and the rectangle has no fill. This draws the stroke, but its not attached to the original object.

bttn.graphics.setStrokeStyle(13).beginLinearGradientStroke(["black", "blue"], [.2, .9], 0, 0,0,50 ).drawRect(20, 20, 120, 120);

What am I missing here?

Thanks.

Upvotes: 1

Views: 1065

Answers (1)

gskinner
gskinner

Reputation: 2488

EaselJS uses a model where you define your stroke and fill, then draw using those styles. So you just need to tweak your code to define the stroke before you draw the rectangle:

var bttn = new c.Shape();
        bttn.graphics.beginLinearGradientFill(["blue", "white"], [.2, .9], 0, 0,0,50 ).setStrokeStyle(13).beginLinearGradientStroke(["black", "blue"], [.2, .9], 0, 0,0,50 ).drawRoundRect(100, 10, 80, 35,5);

And to address your other question, Rectangle in CreateJS represents a geometric rectangle - it's a class for storing data representing a rectangle, and methods to manipulate rectangles, it doesn't draw anything.

Upvotes: 1

Related Questions