Options
All
  • Public
  • Public/Protected
  • All
Menu

Class SCanvasView

Canvas视图基类

author

庞利祥(sybotan@126.com)

Hierarchy

  • SObject
    • SCanvasView

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

  • 构造函数

    Parameters

    • id: string

      画布对象ID

    Returns SCanvasView

Properties

Private _afterLength

_afterLength: number = 0

缩放后二指间距离

Private _beforeLength

_beforeLength: number = 0

未缩放时二指间距离

Private _lastFrameTime

_lastFrameTime: number = 0

最后一次更新时间

Private _midKeyPos

_midKeyPos: SPoint = new SPoint()

鼠标中键按下时位置

Private _needDraw

_needDraw: boolean = true

Private _origin

_origin: SPoint = new SPoint()

原点坐标

Private _scale

_scale: number = 1

缩放比例

Private _touchPoint

_touchPoint: SPoint = new SPoint()

手指拖动点

Private _touchState

_touchState: STouchState = STouchState.None

手执状态

Protected Readonly canvasView

canvasView: HTMLCanvasElement

canvas视图

id

id: string

maxScale

maxScale: number = 1000000

最大缩放比例

minScale

minScale: number = 0.000001

最小缩放比例

moveable

moveable: boolean = true

可否进行平移操作

name

name: string

scalable

scalable: boolean = true

可否执行绽放操作

wheelZoom

wheelZoom: number = 1.05

鼠标滚轮缩放速度

Accessors

canvas

  • get canvas(): CanvasRenderingContext2D | null

  • Returns CanvasRenderingContext2D | null

cursor

  • set cursor(v: string): void

  • 鼠标样式

    Parameters

    • v: string

    Returns void

height

  • get height(): number

  • 高度

    Returns number

origin

  • Returns SPoint

  • Parameters

    Returns void

scale

  • get scale(): number
  • set scale(v: number): void

  • Returns number

  • Parameters

    • v: number

    Returns void

width

  • get width(): number

  • 宽度

    Returns number

Methods

$emit

  • $emit(name: string, ...args: any): void

  • Parameters

    • name: string
    • Rest ...args: any

    Returns void

Private bindEvent

  • bindEvent(element: HTMLElement): void

  • 绑定事件

    Parameters

    • element: HTMLElement

      要绑定事件的元素

    Returns void

connect

  • connect(name: string, receiver: any, callback: Function): void

  • Parameters

    • name: string
    • receiver: any
    • callback: Function

    Returns void

disconnect

  • disconnect(name: string, receiver: any): void

  • Parameters

    • name: string
    • receiver: any

    Returns void

Private getDistance

  • getDistance(event: TouchEvent): number

  • 获取两手指之间的距离

    Parameters

    • event: TouchEvent

      触摸事件

    Returns number

    两手指之间的距离

Private getMiddlePoint

  • getMiddlePoint(event: TouchEvent): SPoint

  • 获得两个手指触摸点的中点坐标

    Parameters

    • event: TouchEvent

    Returns SPoint

    得到视图的x坐标中点

imageUrl

  • imageUrl(type: string): string

  • 图像的URL

    Parameters

    • type: string

      图像类型

    Returns string

Protected loop

  • loop(): void

  • 循环

    Returns void

Protected onClick

  • onClick(event: MouseEvent): void

  • 鼠标单击事件

    Parameters

    • event: MouseEvent

      事件参数

    Returns void

Protected onContextMenu

  • onContextMenu(event: MouseEvent): void

  • 上下文菜单事件

    Parameters

    • event: MouseEvent

      事件参数

    Returns void

Protected onDoubleClick

  • onDoubleClick(event: MouseEvent): void

  • 鼠标双击事件

    Parameters

    • event: MouseEvent

      事件参数

    Returns void

Protected onDraw

  • 绘制视图

    Parameters

    Returns void

Protected onKeyDown

  • onKeyDown(event: KeyboardEvent): void

  • 按键按下事件

    Parameters

    • event: KeyboardEvent

      事件参数

    Returns void

Protected onKeyPress

  • onKeyPress(event: KeyboardEvent): void

  • 按键press事件

    Parameters

    • event: KeyboardEvent

      事件参数

    Returns void

Protected onKeyUp

  • onKeyUp(event: KeyboardEvent): void

  • 按键松开事件

    Parameters

    • event: KeyboardEvent

      事件参数

    Returns void

Protected onMouseDown

  • onMouseDown(event: MouseEvent): void

  • 鼠标按下事件

    Parameters

    • event: MouseEvent

      事件参数

    Returns void

Protected onMouseMove

  • onMouseMove(event: MouseEvent): void

  • 鼠标移动事件

    Parameters

    • event: MouseEvent

      事件参数

    Returns void

Protected onMouseUp

  • onMouseUp(event: MouseEvent): void

  • 鼠标松开事件

    Parameters

    • event: MouseEvent

      事件参数

    Returns void

Protected onMouseWheel

  • onMouseWheel(event: WheelEvent): void

  • 鼠标滚轮事件

    Parameters

    • event: WheelEvent

      事件参数

    Returns void

Protected onResize

  • onResize(event: UIEvent): void

  • View大小变更事件

    Parameters

    • event: UIEvent

      事件参数

    Returns void

Protected onTouchEnd

  • onTouchEnd(event: TouchEvent): void

  • 结束触摸事件

    Parameters

    • event: TouchEvent

      事件参数

    Returns void

Protected onTouchMove

  • onTouchMove(event: TouchEvent): void

  • 触摸移动事件

    Parameters

    • event: TouchEvent

      事件参数

    Returns void

Protected onTouchStart

  • onTouchStart(event: TouchEvent): void

  • 开始触摸事件

    Parameters

    • event: TouchEvent

      事件参数

    Returns void

Private requestAnimationFrame

  • requestAnimationFrame(callback: FrameRequestCallback): number

  • 启动动画帧（即指定时间执行回调函数）

    Parameters

    • callback: FrameRequestCallback

      回调函数

    Returns number

saveImage

  • saveImage(name: string, type: string): void

  • 保存图像

    Parameters

    • name: string

      名称

    • type: string

      图像类型

    Returns void

saveSvg

  • saveSvg(name: string): void

  • 视图内容保存为SVG文件

    Parameters

    • name: string

      文件名

    Returns void

scaleByPoint

  • scaleByPoint(zoom: number, x0: number, y0: number): void

  • 缩放视图时计算视图的位置与缩放比例

    Parameters

    • zoom: number

      缩放比例

    • x0: number

      缩放计算的中心点X坐标

    • y0: number

      缩放计算的中心点Y坐标

    Returns void

svgData

  • svgData(): string

  • 视图SVG图形的数据

    Returns string

    URL地址

update

  • update(): void

  • 更新视图

    Returns void

Private viewZoom

  • viewZoom(event: TouchEvent): boolean

  • 缩放视图

    Parameters

    • event: TouchEvent

      触摸事件

    Returns boolean