Gradient()
1)gradient()
有线性和径向梯度。线性梯度可以这样创建:
var gradient = draw.gradient('linear', function(add) {
add.stop(0, '#333')
add.stop(1, '#fff')
})
var rect = draw.rect(400, 400)
rect.attr({
fill: gradient })
或者
rect.fill(gradient)
2)gradient.stop()
stop需要偏移和颜色参数,不透明度是可选的。偏移量是介于0和1之间的浮动值或百分比值(例如33%)。
gradient.stop(0, '#333')
gradient.stop({
offset: 0, color: '#333', opacity: 1 })
3)gradient.url()
返回调用的渐变元素的id地址
gradient.url() //-> returns 'url(#SvgjsGradient1234)'
4)gradient.from()/to()
定义渐变色开始到结束的位置:
gradient.from(0, 0).to(0, 1)
from和to值也以百分比表示。
5)gradient.get()
get()方法使从现有渐变获得stop变得更加容易:
var gradient = draw.gradient('radial', function(add) {
add.stop({
offset: 0, color: '#000', opacity: 1 }) // -> first
add.stop({
offset: 0.5, color: '#f03', opacity: 1 }) // -> second
add.stop({
offset: 1, color: '#066', opacity: 1 }) // -> third
})
var s1 = gradient.get(0) // -> returns "first" stop
6)gradient.update()
用于更新渐变
gradient.update(function(add) {
add.stop(0.1, '#333', 0.2)
add.stop(0.9, '#f03', 1)
})
7)gradient.radius()
径向渐变有一个radius()方法来定义内部颜色应延伸的最外半径:
var gradient = draw.gradient('radial', function(add) {
add.stop(0, '#333')
add.stop(1, '#fff')
})
gradient.from(0.5, 0.5).to(0.5, 0.5).radius(0.5)
Stop()
1)stop()
stop元素只可以在gradient元素中使用
var stop = gradient.stop(0.5, '#f03')
var stop = gradient.stop({
offset: 0.5, color: '#f06', opacity: 1 })
2)stop.update()
采用与构造函数相同的参数。
stop.update(0, '#333')
stop.update({
offset: 0, color: '#333', opacity: 1 })
Pattern()
1)pattern()
创建图案与创建渐变非常相似:
var pattern = draw.pattern(20, 20, function(add) {
add.rect(20,20).fill('#f06')
add.rect(10,10)
add.rect(10,10).move(10,10)
})
var rect = draw.rect(400, 400).fill(pattern)
这将创建一个20 x 20像素的方格图案。可以将任何可用元素添加到图案中。
最后,要在元素上使用模式:
rect.attr({
fill: pattern })
2)pattern.url()
pattern.url() //-> returns 'url(#SvgjsPattern1234)'
3)pattern.update()
之后还可以更新模式:
pattern.update(function(add) {
add.circle(15).center(10,10)
})