Canvas Scale the canvas 缩放画布 - caleb531/jcanvas-docs GitHub Wiki
Scale the canvas 缩放画布
Scaling the canvas context 缩放画布语境
The scaleCanvas()
method scales the canvas from the included point.
scaleCanvas()
方法将画布从(画布)包含的点(参照此点)进行缩放。
$('canvas').scaleCanvas({
x: 100, y: 100,
scaleX: 1.5, scaleY: 3
})
.drawArc({
fillStyle: '#000',
x: 100, y: 100,
radius: 20
})
.restoreCanvas();
scale
property(缩放)scale
属性
The You can also set both the scaleX
and scaleY
properties using the scale
property.
你也可以使用scale
属性同时设置scaleX
和scaleY
属性。
$('canvas').scaleCanvas({
scale: 2
})
.drawRect({
fillStyle: '#000',
x: 100, y: 100,
width: 100, height: 50
})
.restoreCanvas();
Scaling an individual shape 缩放独立图形
Rather than scaling the entire canvas, you can scale an individual shape using any of these three properties: scale
, scaleX
, or scaleY
.
不用缩放整个画布,你可以用这三个属性scale
,scaleX
,scaleY
来缩放独立图形。
// This square is scaled to be a rectangle 这个正方形被缩放成矩形
$('canvas').drawRect({
fillStyle: '#36c',
x: 200, y: 100,
width: 100, height: 100,
scaleX: 3
});
Layers 层
Although it may seem slightly counterintuitive, the scaleCanvas() method can actually be drawn as a layer. This allows for applying canvas transformations when drawing layers.
尽管这似乎有些违反直觉,但scaleCanvas()
方法实际上可以被绘制为一个层。这个特点允许在绘制层时应用画布转换。
To do this, set the layer property to true, just as you would to make any other shape a layer. In addition, just as you can with any other type of layer, you can give this layer a name using the name property.
为了做到这点,要将layer
属性设置为true
,就像你将任意其它图形设置成层那样。再有,就像你在其它层上做的那样,你也可以给这个层用name
属性定一个名字。
$('canvas').scaleCanvas({
layer: true,
name: 'scale1'
});
However, whenever you're done scaling the canvas, you must restore the transformation using the restoreCanvas()
method.
但无论何时,你完成缩放画布之后,你都必须恢复转换,使用restoreCanvas()
方法。
$('canvas').restoreCanvas({
layer: true
});
Notes 注意
The scaleX
and scaleY
values are multiples of the canvas's current width/height (i.e. 1 is the baseline).
scaleX
和scaleY
的值,是画布当前宽高的倍数(即1是基本)。
To revert to the canvas's previous state, call the restoreCanvas()
method. However, you do not need to call this method when scaling an individual shape.
为了转换到画布之前的状态,要调用restoreCanvas()
方法。但在缩放独立图形之后不需要调用它。