Appearance
@jtopo/core / Camera
Class: Camera
相机对象,更直观简单的方式控制画面的显示、缩放。
js
let camera = stage.camera;
// 看向某个坐标 (世界坐标系) , 该坐标将移到画布中心
camera.lookAt(100, 100);
// 看向指定对象或者一组对象的中心, 该点将被置于画布中心
camera.lookAtObject(node);
// 聚焦在指定对象(及子节点)上,其他对象不可见
camera.lookOnly(node);
// 缩放到指定系数
camera.zoom(2);
// 缩放最大极限, 默认:10 (最大能放大10倍)
camera.zoomInLimit = 2;
// 缩放最小极限,默认:0.1 (最小能缩放到原来的十分之一)
camera.zoomOutLimit = 0.5;
// 缩放最大极限, 默认:10 (最大能放大10倍)
camera.zoomInLimit = 2;Since
2.5.0
Hierarchy
↳
Camera
Table of contents
Constructors
Properties
Accessors
Methods
- addEventListener
- canSee
- clearDirty
- dispatchEvent
- exclude
- getObjectScreenTransform
- getScreenTransform
- getShowOnlyObject
- getTransform
- hasListener
- include
- isDirty
- lock
- lookAt
- lookAtContentCenter
- lookAtObject
- lookOnly
- markDirty
- on
- removeEventListener
- reset
- toScreenRect
- toScreenXY
- toWorldRect
- toWorldXY
- unlock
- zoom
- zoomBy
- zoomIn
- zoomOut
- zoomToFit
Constructors
constructor
new Camera(stage)
Parameters
| Name | Type |
|---|---|
stage | Stage |
Overrides
Properties
enableWheelZoom
enableWheelZoom: boolean = true
是否允许滚轮缩放
lookAtX
Readonly lookAtX: number = 0
当前看向的x坐标
lookAtY
Readonly lookAtY: number = 0
当前看向的y坐标
zoomInFactor
zoomInFactor: number = 1.25
放大系数, 默认1.25
zoomInLimit
zoomInLimit: number = 10
缩放最大极限, 默认:10 (最大能放大10倍)
//例如:限制最大能缩放2倍
camera.zoomInLimit = 2;zoomOutFactor
zoomOutFactor: number = 0.8
缩小系数, 默认0.8
zoomOutLimit
zoomOutLimit: number = 0.1
缩放最小极限,默认:0.1 (最小能缩放到原来的十分之一)
//例如:限制最小能缩放到原来的一半
camera.zoomOutLimit = 0.5;Accessors
locked
get locked(): boolean
相机是否被锁定
Returns
boolean
set locked(v): void
相机是否被锁定
Parameters
| Name | Type |
|---|---|
v | boolean |
Returns
void
offsetX
get offsetX(): number
Returns
number
set offsetX(v): void
Parameters
| Name | Type |
|---|---|
v | number |
Returns
void
offsetY
get offsetY(): number
Returns
number
set offsetY(v): void
Parameters
| Name | Type |
|---|---|
v | number |
Returns
void
scale
get scale(): number
Returns
number
set scale(v): void
Parameters
| Name | Type |
|---|---|
v | number |
Returns
void
Methods
addEventListener
addEventListener(type, callback): void
增加事件监听
Parameters
| Name | Type | Description |
|---|---|---|
type | "zoom" | 事件类型 |
callback | (e: CameraEvent) => void |
Returns
void
Overrides
canSee
canSee(obj): boolean
对象是否对相机可见
Parameters
| Name | Type |
|---|---|
obj | NE |
Returns
boolean
clearDirty
clearDirty(): void
Returns
void
dispatchEvent
dispatchEvent(event): void
分发事件
Parameters
| Name | Type |
|---|---|
event | Event | EventBase |
Returns
void
Inherited from
exclude
exclude(obj): void
排除某个图元, 该图元对于相机不可见
Parameters
| Name | Type |
|---|---|
obj | NE |
Returns
void
getObjectScreenTransform
getObjectScreenTransform(obj): Transform
Parameters
| Name | Type |
|---|---|
obj | NE |
Returns
Transform
getScreenTransform
getScreenTransform(): Transform
Returns
Transform
getShowOnlyObject
getShowOnlyObject(): NE
获取聚焦的对象
Returns
getTransform
getTransform(): Transform
Returns
Transform
hasListener
hasListener(type): boolean
是否有该类型的监听
Parameters
| Name | Type |
|---|---|
type | "zoom" |
Returns
boolean
Overrides
include
include(obj): void
恢复某个图元, 该图元对于相机可见
Parameters
| Name | Type |
|---|---|
obj | NE |
Returns
void
isDirty
isDirty(): boolean
Returns
boolean
lock
lock(): void
锁定相机 (一直保持当前位置和缩放,不再响应滚轮缩放、和拖拽移动)
Returns
void
lookAt
lookAt(x, y): void
看向某个坐标 (世界坐标系) , 该坐标将移到画布中心
Parameters
| Name | Type |
|---|---|
x | number |
y | number |
Returns
void
lookAtContentCenter
lookAtContentCenter(layer?): void
‘看向’指定Layer的内容中心
Parameters
| Name | Type | Description |
|---|---|---|
layer? | Layer | 指定Layer, 默认为当前Layer |
Returns
void
lookAtObject
lookAtObject(obj): void
"看向"指定对象或者一组对象的中心(置于画布中心)
Parameters
| Name | Type |
|---|---|
obj | NE | NE[] |
Returns
void
lookOnly
lookOnly(object): void
聚焦在指定对象(及子节点)上,其他对象不可见
Parameters
| Name | Type | Description |
|---|---|---|
object | NE | 再次聚焦或者为null时会切换或取消聚焦 |
Returns
void
markDirty
markDirty(): void
Returns
void
on
on(type, callback): void
addEventLister的别名
Parameters
| Name | Type |
|---|---|
type | string |
callback | Function |
Returns
void
Inherited from
removeEventListener
removeEventListener(type, callback): void
移除一个事件监听
Parameters
| Name | Type |
|---|---|
type | "zoom" |
callback | (e: CameraEvent) => void |
Returns
void
Overrides
EventTarget.removeEventListener
reset
reset(): void
Returns
void
toScreenRect
toScreenRect(rect): Rectangle
将世界坐标系下的矩形,变换到屏幕坐标系
Parameters
| Name | Type |
|---|---|
rect | Rectangle |
Returns
toScreenXY
toScreenXY(x, y): Object
世界坐标,转成屏幕坐标
Parameters
| Name | Type |
|---|---|
x | number |
y | number |
Returns
Object
| Name | Type |
|---|---|
x | number |
y | number |
toWorldRect
toWorldRect(rect): Rectangle
屏幕坐标下的矩形,变换到Layer坐标系
Parameters
| Name | Type |
|---|---|
rect | Rectangle |
Returns
toWorldXY
toWorldXY(x, y): Object
屏幕坐标,转成世界坐标
Parameters
| Name | Type |
|---|---|
x | number |
y | number |
Returns
Object
| Name | Type |
|---|---|
x | number |
y | number |
unlock
unlock(): void
解锁相机
Returns
void
zoom
zoom(s): void
缩放到指定系数
Parameters
| Name | Type | Description |
|---|---|---|
s | number | 缩放系数 |
Returns
void
zoomBy
zoomBy(s, cx?, cy?): void
指定坐标为中心,进行缩放
会抛出zoom事件, 可捕获,如:
```js camera.on('zoom', (event)=>{ event.preventDefault(); // 阻止缩放 }) ```Parameters
| Name | Type | Description |
|---|---|---|
s | number | 缩放系数 |
cx? | number | 缩放中心的x坐标 (世界坐标) |
cy? | number | 缩放中心的y坐标 (世界坐标) |
Returns
void
zoomIn
zoomIn(): void
放大(镜头推进)
Returns
void
zoomOut
zoomOut(): void
缩小(镜头拉远)
Returns
void
zoomToFit
zoomToFit(opt?): void
缩放到画布1:1并居中
Parameters
| Name | Type |
|---|---|
opt | Object |
opt.padding? | number |
Returns
void