Draw section of shape with EaselJS

问题

I have been trying to find out if it is possible to draw only a section of a shape using EaselJS. For example, is it possible to create a Rounded Rectangle, but only draw the top two thirds of it? (Effectively not displaying the bottom third).

Thank you in advance for any advice you may have!

回答1:

What is the end goal? Depending on what you want to do, there are a few ways to do it:

1. Mask it using another shape to crop it
2. Cache it to the size you want

http://jsfiddle.net/lannymcnie/f1zh3qwx/

// Create 2 shapes
var s = new createjs.Shape().set({x:10, y:10});
s.graphics.f("red").ss(4).s("blue").rr(0,0,100,100,10);
var s2 = s.clone().set({x:150});
stage.addChild(s, s2);

// 1. Mask
s.mask = new createjs.Shape(new createjs.Graphics().dr(8,8,50,50));

// 2. Cache
s2.cache(-2,-2,50,50);

You can also use roundRectComplex to draw different corners. http://jsfiddle.net/lannymcnie/f1zh3qwx/1/

来源：https://stackoverflow.com/questions/38454511/draw-section-of-shape-with-easeljs