Resizing
1)size()
将元素的大小设置为给定的宽度和高度:
rect.size(200, 300)
通过省略高度,也可以按比例调整大小:
rect.size(200)
或者通过传递null作为宽度值:
rect.size(null, 200)
与定位一样,可以使用attr()设置元素的大小。但由于每种类型的元素都不同地处理其大小,因此size()方法要方便得多。
2)width() / height() as setter
设置元素的宽度/高度:
rect.width(200)
rect.height(200)
3)width() / height() as getter
var width = rect.width()
var height = rect.height()
4)radius()
cirlce、ellipses和rect可以使用radius()方法。在rect上,它定义圆角。
对于circle,参数设置r属性。
circle.radius(10)
对于ellipses和rect,传递两个参数以分别设置rx和ry属性。或者,传递一个参数,使两个属性相等。
ellipse.radius(10, 20)
rect.radius(5)
Syntactic sugar
1)fill()
fill()方法是attr()方法的一个很好的替代方法:
rect.fill({
color: '#f06', opacity: 0.6 })
单个十六进制字符串也可以工作:
rect.fill('#f06')
最后但同样重要的是,您还可以使用图像作为填充,只需传递图像url:
rect.fill('images/shade.jpg')
或者,如果您希望对图像进行更多控制,也可以传递图像实例:
rect.fill(draw.image('images/shade.jpg', function() {
this.size(20, 20)
}))
2)stroke()
stroke()方法类似于fill():
rect.stroke({
color: '#f06', opacity: 0.6, width: 5 })
与fill一样,单个十六进制字符串也可以工作:
rect.stroke('#f06')
与fill()方法不同,您也可以使用图像作为笔划,只需传递图像url:
rect.stroke('images/shade.jpg')
或者,如果您希望对图像的大小进行更多控制,也可以传递图像实例:
rect.stroke(draw.image('images/shade.jpg', 20, 20))
3)opacity()
要设置元素的整体不透明度,请执行以下操作:
rect.opacity(0.5)