手机画布设计方案

Image

+ type:string = 'image'

+ constructor(options)+ initialize(options)

extends

CanvasUI-1

Circle

+ type:string = 'circle'+ radius:number = 0

...

Group

+ type:string = 'group'+ objects:BaseObject[] = []

+ constructor(options)+ initialize(options)+ calcDimensions   (计算边界)

reference

CanvasManager

+ constructor(options)+ initialize(options)+ setViewportTransform+ setZoom()+ getZoom()+ isEmpty()+ size()+ contains()+ add(...object)+ remove(object)+ clear()+ dispose()+ toDataURL()+ toSvg()+ toJSON()+ setActiveObject+ getActiveObjects+ discardActiveObject+ getObjects+ calcViewportBoundaries+ loadSVGFromString+ loadFromJSON

Ellipse

invoke

Point

+ x:number = 0+ y:number = 0

CanvasUI-2

BaseObject

+ constructor(options)+ initialize(options)+ setCoords+ containsPoint+ getScaledWidth+ getScaledHeight+ getCenterPoint+ getBoundingRect+ isType+ toJSON

钩子函数创建CanvasManager实例，一个实例维护一个画布对象

BoundRect

+ left:number = 0+ top:number = 0+ width:number = 0+ height:number = 0

Path

+ type:string = 'path'

CustomData

+ id:string = ''+ svgId:string = ''+ orderId:number = 0+ isVisible:boolean = true+ isSelected:boolean = false+ groupId:string = ''+ objType:string = 'sharp'+ operation:string = 'basicCut'+ dashLine:boolean = false+ flatten:boolean = false+ color:boolean = ''+ code:string = ''+ subId:number = 0

CanvasUtil

+ parseSvg(svg):BaseObject[]+ parseJson(json):BaseObject[]

Rect

+ type:string = 'rect'+ rx:number = 0+ ry:number = 0