ue-too
Version:
pan, zoom, and rotate your html canvas
3 lines (2 loc) • 1.88 kB
JavaScript
class Container{constructor(context){this._context=context,this._children=[],this._position={x:0,y:0},this._rotation=0,this._scale=1}set position(position){this._position=position}get position(){return this._position}addDrawTask(task){this._children.push(task)}drawWithContext(context,deltaTime){context.save(),context.translate(this._position.x,this._position.y),context.rotate(this._rotation),context.scale(this._scale,this._scale);for(const child of this._children)child.drawWithContext(context,deltaTime);context.restore()}draw(deltaTime){this._context.save(),this._context.translate(this._position.x,this._position.y),this._context.rotate(this._rotation),this._context.scale(this._scale,this._scale);for(const child of this._children)child.draw(deltaTime);this._context.restore()}}class SelectionBox{constructor(context){this._context=context,this._startPoint={x:0,y:0},this._endPoint={x:0,y:0},this._selecting=!0}set startPoint(point){this._startPoint=point,this._endPoint=point}get startPoint(){return this._startPoint}set endPoint(point){this._endPoint=point}get endPoint(){return this._endPoint}draw(deltaTime){this._selecting&&(this._context.save(),this._context.beginPath(),this._context.rect(this._startPoint.x,this._startPoint.y,this._endPoint.x-this._startPoint.x,this._endPoint.y-this._startPoint.y),this._context.stroke(),this._context.fill(),this._context.restore())}drawWithContext(context,deltaTime){this._selecting&&(context.save(),context.fillStyle="rgba(0, 0, 0, 0.5)",context.beginPath(),context.rect(this._startPoint.x,this._startPoint.y,this._endPoint.x-this._startPoint.x,this._endPoint.y-this._startPoint.y),context.stroke(),context.fill(),context.restore())}startSelection(){this._selecting=!0}clearSelection(){this._selecting=!1,this._startPoint={x:0,y:0},this._endPoint={x:0,y:0}}}export{Container,SelectionBox};
//# sourceMappingURL=index.js.map