博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
LimeJS指南3
阅读量:4325 次
发布时间:2019-06-06

本文共 2888 字,大约阅读时间需要 9 分钟。

# 形状与填充

## Sprites

前几章我们学习了关于node的类。虽然node是LimeJS中最重要的类,但是你几乎从不创建一

个node。我们可以创建sprite,sprite是矩形的显示对象。它的外观可以通过方法
*setFill(fill)*来添加,所有node的函数在sprite和其它形状都可以使用。这也包括添加
子sprite。

#!JavaScript

var redsquare = new lime.Sprite().setSize(50,50).setFill
('#c00').setAnchorPoint(0,0);
layer.appendChild(redsquare);

## 其他普通形状

### Circle

用circle能很容易的建立圆形或椭圆,所有方法与sprite相同。注意你不是定义半径而是定

义它的宽和高。

#!JavaScript

var circle = new lime.Circle().setSize(40,40);
// circle with radius 20

### RoundedRect

圆角矩形(roundedRect)除了有sprite的方法,还有一个额外方法*setRadius(radius)*,

radius就是角的半径。

#!JavaScript

var shape = new lime.RoundedRect().setSize(100,40).
setRadius(10);

### Label

label可以放入文本内容,文字可以通过*setText(str)*的方法来定义。你也可以设置字体

属性和alignment。如果你如果你不定义label的大小,label会自动以文字的长度和字体的
大小来计算label的大小。

#!JavaScript

var lbl = new lime.Label().setText('Your Score: 10').setFontFamily
('Verdana').setFontColor('#c00').setFontSize(26).setFontWeight('bold').setSize
(150,30);

### Polygon

polygon是LimeJS中最抽象的形状,你需要定义点来做出polygon,其他的都为你做好了。你

不能改变polygon的锚点和大小因为this are also taken from the point values。这种灵
活的方式允许你创造几乎所有形状,但也提示你较少的点将达到较好的效果

#!JavaScript

var triangle = new lime.Polygon().
addPoints(0,-1, .5,.5, -.5,.5);

## Fills

简单的创建一个形状将不会在屏幕上显示,只会在两只之间精力联系。为了添加一些可视的

外观,你通过*setFill(fill)*方法设置填充属性。传递给*setFill*的属性可以是执行
*lime.fill.Fill*中的对象,或者对于一些更简单的填充你可以直接传递 符合
*lime.fill.Fill.parse()*函数语法的值。

### Colors

颜色是你可以加到形状上的最简单的填充,你可以以不同形式加入值,如十六进制的字符串

,rgb(a)的字符串或者直接rgb(a)值

#!JavaScript

shape.setFill(100,0,0); //dark red
shape.setFill(0,0,0,.5); // 50% transparent gray
shape.setFill('#ffffff'); //white
shape.setFill('rgb(100,0,0)'); //same dark red as first
一旦你创建了你的颜色填充对象,你可以使用自建的函数改变它的值。更特殊的是,你可以
通过方法*addBrightness(factor)*改变颜色的明暗度,通过*addSaturation(factor)*的方
法改变颜色的饱和度。因子的范围必须是-1到+1之间。

#!JavaScript

var green = new lime.fill.Color(0,100,0); // neutral green
var darker_green = green.addBrightness(-.2);
var intensive_green = green.addSaturation(.3);

 

### 图片

顾名思义,图片填充允许你设置外部的图片作为形状的背景。图片适应元素的大小。

#!JavaScript

sprite.setFill('assets/image.png');

### Gradients

现在只有*lime.fill.LinearGradient*支持渐变,它允许创建一个从一种颜色朝一个方向变

为另一种颜色的背景,而辐射状的渐变现在不支持。渐变的角度可以通过的*setDirection
(x0,y0,x1,y1)*方法定义,点P(x0,y0)和P(x1,y1)定义了1x1方块中开始和结束的位置。渐
变的颜色可以使用addColorStop(offset,var_args)来定义,offset必须好似0-1之间。

#!JavaScript

var gradient = new lime.fill.LinearGradient().
setDirection(0,0,1,1). // 45' angle
addColorStop(0,100,0,0,1). // start from red color
addColorStop(1,0,0,100,.5); // end with transparent blue
sprite.setFill(gradient);

## 遮罩

为形状添加遮罩就意味着你仅仅显示你的元素的某些部位。在LimeJS中遮罩就像在flash中

一样简单 - 你创建两个对象,将其中一个座位另一个的遮罩,只就意味着只有相交的部分
才会被显示,而其他部分从原始的元素上被裁去。现在只支持矩形遮罩。在遮罩设置以后你
仍能修改两个元素的属性变化。

#!JavaScript

var mask = new lime.Sprite().setSize(100,100).setPosition(100,100);
parent.addChild(mask);
var image = new lime.Sprite().setSize(300,200).setFill
('assets/myimage.png');
parent.addChild(image);
image.setMask(mask);

转载于:https://www.cnblogs.com/imbbctoo/p/4087850.html

你可能感兴趣的文章
main(argc,argv[])
查看>>
在线教育工具—白板系统的迭代1——bug监控排查
查看>>
121. Best Time to Buy and Sell Stock
查看>>
hdu 1005 根据递推公式构造矩阵 ( 矩阵快速幂)
查看>>
安装php扩展
查看>>
百度移动搜索主要有如下几类结果构成
查看>>
Python爬虫面试题170道:2019版【1】
查看>>
JavaBean规范
查看>>
第四阶段 15_Linux tomcat安装与配置
查看>>
NAS 创建大文件
查看>>
学习笔记-模块之xml文件处理
查看>>
接口测试用例
查看>>
面试:用 Java 实现一个 Singleton 模式
查看>>
Sybase IQ导出文件的几种方式
查看>>
案例:手动输入一个字符串,打散放进一个列表,小写字母反序 大写字母保持不变...
查看>>
linux 系统下 tar 的压缩与解压缩命令
查看>>
阿里负载均衡,配置中间证书问题(在starcom申请免费DV ssl)
查看>>
转:How to force a wordbreaker to be used in Sharepoint Search
查看>>
MySQL存储过程定时任务
查看>>
Python中and(逻辑与)计算法则
查看>>