用EaselJS绘制形状部分

问题描述

我一直试图找出是否可以使用EaselJS仅绘制一个形状的一部分。例如，是否可以创建一个圆角矩形，但只绘制它的前三分之二？ （有效地不显示底部三分之一）。

预先感谢您的任何建议！

解决方案

最终目标是什么？取决于你想做什么，有几种方法可以做到这一点：

1. 使用另一个形状对其进行掩盖来裁剪它
>

2. 将其缓存到您想要的大小

  //创建2个形状
 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.掩码
 s.mask = new createjs.Shape（new createjs.Graphics（）。dr（8,8,50,50））; 
 
 // 2.缓存
 s2.cache（-2，-2,50,50）; 
  

您也可以使用绘制不同的角落。

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!

解决方案

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/

这篇关于用EaselJS绘制形状部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！