Layer Manipulating Layers 操作层 - caleb531/jcanvas-docs GitHub Wiki
Manipulating Layers 操作层
Setting layer properties 设置层属性
Using the setLayer()
method, you can set the properties of a layer. The method's arguments include:
使用setLayer()
方法,你可以给层设置属性,方法的参数包括:
1.The name
or index of the layer, or the layer itself
层的名称或索引,或层对象本身
2.The object of properties to set.
要设置的属性对象
Note that this method does not automatically redraw the canvas.
注意,本方法不会自动重绘画布。
$('canvas').setLayer('myBox', {
fillStyle: '#36b',
rotate: 30,
x: '+=100',
y: '-=100'
})
.drawLayers();
Note that the you can use the '+=' and '-=' strings to increment and decrement numbers, respectively.
注意,你可以使用+=
和-=字
符串,来分别增加或减少数值。
You can also set properties on all layers using the setLayers()
method.
你也可以使用setLayers()
方法来设置所有层上的属性。
// Set properties of all layers 设置所有层的属性
$('canvas').setLayers({
fillStyle: '#36b',
rotate: 30
})
.drawLayers();
Note that the setLayers()
method also accepts a callback function as s second argument, which filters the layers.
注意,setLayers()
方法也接收一个回调函数作为第二参数,回调函数用于过滤层。
// Set properties of all draggable layers 给所有的可拖拽层设置属性
$('canvas').setLayers({
fillStyle: '#36b',
rotate: 30
}, function(layer) {
return (layer.draggable === true);
})
.drawLayers();
Setting layer group properties 设置层分组属性
Using the setLayerGroup()
method, you can set any properties of all layers in the group. The method accepts the same arguments as setLayer()
.
使用setLayerGroup()
方法,你可以设置组内所有层的任何属性。本方法接收与setLayer()
相同的参数。
Also note that this method does not automatically redraw the canvas.
还要注意,本方法不会自动重绘画布。
// Set properties for all layers 设置分组myBoxes中所有层的属性
// in the group 'myBoxes'
$('canvas').setLayerGroup('myBoxes', {
fillStyle: '#36b',
rotate: 30
})
.drawLayers();
Moving layers 移动层
Using the moveLayer()
method, you can move a layer to a new index in the layers array. Please note that the canvas does not change until you redraw it.
使用moveLayer()
方法,你可以将一个层移动到层数组内的新索引上。请注意,画布在你重绘它之前是不会改变的。
The method accepts a layer ID (name, index, or object), and the new index to which the layer is to be moved.
方法接收一个层ID(名称,索引或对象),及层要被移到的那个索引号。
Also note that this method does not automatically redraw the canvas.
还要注意,这个方法不会重绘画布。
// Move the layer with the name 'box' to index 1 将名称为box的层移动到索引1处
$('canvas').moveLayer('box', 1);
Removing layers 删除层
jCanvas provides a removeLayer()
method for removing one layer from the jCanvas layers array.
jCanvas提供了一个removeLayer()
方法用来从jCanvas层数组中删除一个层。
Also note that this method does not automatically redraw the canvas.
要注意,本方法不会自动重绘画布。
// Removes the layer at index 0 删除索引0处的层
$('canvas').removeLayer(0);
// Removes the layer with the name 'myBox' 删除名字为myBox的层
$('canvas').removeLayer('myBox');
Furthermore, you can remove all layers using the removeLayers()
method.
还有,你可以使用removeLayers()
方法删除所有的层。
// Remove all layers 删除所有层
$('canvas').removeLayers();
As with the getLayers()
and setLayers()
methods, the removeLayers()
method also accepts a callback function.
像getLayers()
和setLayers()
方法一样,removeLayers()
方法也接收一个回调函数。
// Remove all draggable layers 删除所有可拖拽层
$('canvas').removeLayers(function(layer) {
return (layer.draggable === true);
});
Removing layer groups 删除层分组
Using the removeLayerGroup()
method, You can remove any layers from the layers array which are in the same layer group.
使用removeLayerGroup()
方法,你可以从层数组中,删除在同一层分组中的任意层。
// Remove all layers in the group 'myBoxes' 删除分组myBoxes中的所有层
$('canvas').removeLayerGroup('myBoxes');
To dynamically remove an existing layer from a group, use the removeLayerFromGroup()
method.
为了动态从组中删除一个已有层,请使用removeLayerFromGroup()
方法。
// Remove the layer with the name 'box' 删除组myBoxes中名字为box的层
// from the group 'myBoxes'
$('canvas').removeLayerFromGroup('box', 'myBoxes');
Notes 注意
None of the above methods redraw the canvas after being called. Therefore, you will need to redraw the canvas using the drawLayers()
method to see the changes visually.
上边的方法,没有一个在调用之后会重绘画布,因此你需要使用drawLayers()
方法来重绘画布,来查看视觉上的变化