Cambiar el tamaño
1) tamaño()
Establezca el tamaño de un elemento a un ancho y alto determinados:
rect.size(200, 300)
También es posible cambiar el tamaño proporcionalmente omitiendo la altura:
rect.size(200)
o pasando null como valor de ancho:
rect.size(null, 200)
Al igual que con el posicionamiento, se puede dimensionar un elemento usando attr(). Pero como cada tipo de elemento maneja su tamaño de manera diferente, el método size() es mucho más conveniente.
2）ancho() / alto() como definidor
Establecer el ancho/alto de un elemento:
rect.width(200)
rect.height(200)
3）ancho() / alto() como captador
var width = rect.width()
var height = rect.height()
4）radio()
Los círculos, elipses y rect pueden usar el método radio(). En rect define esquinas redondeadas.
Para el círculo, el parámetro establece el atributo r.
circle.radius(10)
Para elipses y rectas, pase dos parámetros para establecer los atributos rx y ry respectivamente. Alternativamente, pase un argumento que iguale las dos propiedades.
ellipse.radius(10, 20)
rect.radius(5)
Azúcar sintáctica
1）rellenar()
El método fill() es una buena alternativa al método attr():
rect.fill({
color: '#f06', opacity: 0.6 })
Una sola cadena hexadecimal también funcionaría:
rect.fill('#f06')
Por último, pero no menos importante, también puedes usar imágenes como relleno, simplemente pasa la URL de la imagen:
rect.fill('images/shade.jpg')
Alternativamente, si desea tener más control sobre la imagen, también puede pasar una instancia de imagen:
rect.fill(draw.image('images/shade.jpg', function() {
this.size(20, 20)
}))
2 tiempos()
El método trazo() es similar a llenar():
rect.stroke({
color: '#f06', opacity: 0.6, width: 5 })
Al igual que con el relleno, una única cadena hexadecimal también funciona:
rect.stroke('#f06')
A diferencia del método fill(), también puedes usar imágenes como trazos, simplemente pasa la URL de la imagen:
rect.stroke('images/shade.jpg')
Alternativamente, si desea tener más control sobre el tamaño de la imagen, también puede pasar una instancia de imagen:
rect.stroke(draw.image('images/shade.jpg', 20, 20))
3）opacidad()
Para establecer la opacidad general de un elemento:
rect.opacity(0.5)