js如何实现注册功能吗,js如何实现重置功能,js复制功能如何实现

Shape类在EaselJS中是一个非常重要的类，除了上一节中提到的内容外，还有一些其他方法和属性。让我从这篇文章中选几篇吧。

1.Shape类对象的x和y属性

首先是Shape类的x和y属性，它们的默认值都是0.它们是用来设置这个Shape类对象在画布上相对于它的父元素的坐标的。如果这个Shape类对象直接添加到舞台（Stage类对象）上，那么，这个父元素就是指画布，一般而言，Shape类对象还可以添加到Container类对象中，此时Shape类对象的父元素就是Container类对象。

简而言之，Shape类对象的x和y属性会改变坐标系，也即可以利用这两个属性来设置坐标系的原点，Shape类对象的graphics属性的drawRect()、drawCircle()等绘图方法中设置的坐标都是根据此原点为基础来渲染的。这个原点称为注册点。

关于Container类，它是容器，一个容器里面可以放多个Shape类对象等显示对象，可以用它的addChild()方法添加显示对象，在舞台中也可以加入容器。同样地，容器类对象也是有x和y属性的，作用同Shape类对象的x和y属性一样，一般用于设置画布的坐标原点。

2. 变换

变换就是指平移、缩放和旋转。在EaselJS中，使用Shape类对象的x、y属性可以实现平移，regX、regY和rotation属性可以实现旋转，使用scale、scaleX和scaleY属性可以实现缩放。平移没有什么好说的，更改Shape类对象的x、y属性即可，主要是缩放和旋转。

在EaselJS中，旋转和缩放都是以注册点为基础的，注册点的更改只能使用Shape类对象的x和y属性，但是这样图形也会被平移，于是就出现了regX和regY，这两个属性可以让图形回到原来的位置，所以旋转和缩放一共三步：一，设置注册点（旋转中心或者缩放中心）、二，让图形回归原位，三，进行旋转或缩放，具体请看下面的例子：

（1）旋转

旋转的第三步可以使用rotation属性，单位为弧度。为了看清效果，我们先画一个位于画布中心的矩形（为了有良好的视觉效果，建议大家把canvas标签的背景色改一下，方便看出这个矩形是不是在画布中心进行旋转的），所以先把上次的JavaScript代码改为如下：

window.onload=main; function main(){ var stage=new crea("canvas"); var s=new crea(); s.gra("black").drawRect(135,135,30,30); (s); (); }

然后，我们来将这个矩形顺时针旋转30度，那么代码就可以改为如下：

window.onload=main; function main(){ var stage=new crea("canvas"); var s=new crea(); s.gra("black").drawRect(135,135,30,30); s.x=150; s.y=150; s.regX=150; s.regY=150; s.rotation=30; (s); (); }

为什么是这样呢？

首先，drawRect()方法画的矩形，其参数中的坐标指的是这个矩形图形的左上角坐标，若以画布的左上角作为坐标原点，那么该矩形如果想要处在画布的中央，那么该矩形的左上角坐标应该为(135,135)，之后设置Shape类对象的x和y属性，虽然更改了注册点（即旋转中心），但是此时，矩形的左上角坐标也变为了(285,285)，矩形不在原来位置了，所以需要设置Shape类对象的regX和regY属性，此时注册点没有变，但是矩形的左上角坐标变了回去。最后，再使用rotate属性设置旋转角度即可实现旋转。

（2）缩放

同理，缩放也是有三步，前面两步是一样的，就是第三步有点区别。在缩放的第三步中，使用scaleX可以设置X轴上的缩放程度，scaleY设置Y轴上的缩放程度，scale则设置scaleX和scaleY为同一个值。

window.onload=main; function main(){ var stage=new crea("canvas"); var s=new crea(); s.gra("black").drawRect(135,135,30,30); s.x=150; s.y=150; s.regX=150; s.regY=150; s.scaleX=2; s.scaleY=2; (s); (); }

3. 阴影

使用Shape类对象的Shadow属性可以设置Shape类对象的阴影。如果要使用阴影，则需要构造一个Shadow类对象赋值给shadow属性。

Shadow类的构造方法，共有四个参数，第一个参数是阴影颜色，第二、三个参数是阴影的x和y偏移，第四个参数是阴影的模糊大小。

阴影的图形和该形状对象的图形是一样的，所谓的x和y偏移指的是这个阴影图形和形状图形有多远的距离，模糊大小就是只这个阴影的周围是模糊到什么程度。

【代码举例】

window.onload=main; function main(){ var stage=new crea("canvas"); var s=new crea(); s.gra("black").drawRect(135,135,30,30); s.shadow=new crea("orange",15,15,0); (s); (); }