@bytedance/mona-client-web
Version:
web for mona
156 lines • 6.55 kB
JavaScript
var CanvasContextImplement = /** @class */ (function () {
// private _ctx: CanvasRenderingContext2D;
// private _offscreentCanvas: HTMLCanvasElement;
function CanvasContextImplement(ele) {
if (!ele) {
throw new Error("the canvas's element is empty!");
}
this._ele = ele;
var ctx = ele.getContext('2d');
if (!ctx) {
throw new Error("can't get the context of canvas!");
}
this._ctx = ctx;
// const { context: octx, $canvas } = this.createOffscreenCtx(ele);
// if (!octx) {
// throw new Error("create offscreen canvas failed!")
// }
// this._ctx = octx;
// this._offscreentCanvas = $canvas;
}
// private createOffscreenCtx(ele: HTMLCanvasElement) {
// const width = ele.offsetWidth;
// const height = ele.offsetHeight;
// const $canvas = document.createElement('canvas');
// $canvas.width = width;
// $canvas.height = height;
// const context = $canvas.getContext('2d');
// return { context, $canvas };
// }
CanvasContextImplement.prototype.draw = function (reserve, callback) {
if (!reserve) {
var width = this._ele.width;
var height = this._ele.height;
this._ctx.clearRect(0, 0, width, height);
}
this._ctx.drawImage(this._ele, 0, 0);
if (typeof callback === 'function') {
callback();
}
};
CanvasContextImplement.prototype.setFontSize = function (fontSize) {
this._ctx.font = "".concat(fontSize, "px");
};
CanvasContextImplement.prototype.setFillStyle = function (color) {
this._ctx.fillStyle = color;
};
CanvasContextImplement.prototype.setLineCap = function (lineCap) {
this._ctx.lineCap = lineCap;
};
CanvasContextImplement.prototype.setLineJoin = function (lineJoin) {
this._ctx.lineJoin = lineJoin;
};
CanvasContextImplement.prototype.setLineWidth = function (lineWidth) {
this._ctx.lineWidth = lineWidth;
};
CanvasContextImplement.prototype.setMiterLimit = function (miterLimit) {
this._ctx.miterLimit = miterLimit;
};
CanvasContextImplement.prototype.setTextBaseline = function (textBaseline) {
this._ctx.textBaseline = textBaseline;
};
CanvasContextImplement.prototype.setStrokeStyle = function (color) {
this._ctx.strokeStyle = color;
};
CanvasContextImplement.prototype.setGlobalAlpha = function (alpha) {
this._ctx.globalAlpha = alpha;
};
CanvasContextImplement.prototype.setTextAlign = function (align) {
this._ctx.textAlign = align;
};
CanvasContextImplement.prototype.setLineDash = function (pattern, offset) {
this._ctx.setLineDash(pattern);
this._ctx.lineDashOffset = offset;
};
CanvasContextImplement.prototype.createLinearGradient = function (sx, sy, dx, dy) {
return this._ctx.createLinearGradient(sx, sy, dx, dy);
};
CanvasContextImplement.prototype.setTransform = function (scaleX, skewX, skewY, scaleY, translateX, translateY) {
return this._ctx.setTransform(scaleX, skewX, skewY, scaleY, translateX, translateY);
};
CanvasContextImplement.prototype.beginPath = function () {
return this._ctx.beginPath();
};
CanvasContextImplement.prototype.clip = function () {
return this._ctx.clip();
};
CanvasContextImplement.prototype.lineTo = function (x, y) {
return this._ctx.lineTo(x, y);
};
CanvasContextImplement.prototype.transform = function (scaleX, skewX, skewY, scaleY, translateX, translateY) {
return this._ctx.transform(scaleX, skewX, skewY, scaleY, translateX, translateY);
};
CanvasContextImplement.prototype.fill = function () {
return this._ctx.fill();
};
CanvasContextImplement.prototype.stroke = function () {
return this._ctx.stroke();
};
CanvasContextImplement.prototype.fillRect = function (x, y, width, height) {
return this._ctx.fillRect(x, y, width, height);
};
CanvasContextImplement.prototype.strokeRect = function (x, y, width, height) {
return this._ctx.strokeRect(x, y, width, height);
};
CanvasContextImplement.prototype.drawImage = function (imageResource, sx, sy, sw, sh, dx, dy, dw, dh) {
// TODO
var $image = document.createElement('img');
$image.src = imageResource;
return this._ctx.drawImage($image, sx, sy, sw || 0, sh || 0, dx || 0, dy || 0, dw || 0, dh || 0);
};
CanvasContextImplement.prototype.measureText = function (text) {
return this._ctx.measureText(text);
};
CanvasContextImplement.prototype.scale = function (scaleWidth, scaleHeight) {
return this._ctx.scale(scaleWidth, scaleHeight);
};
CanvasContextImplement.prototype.rotate = function (rotate) {
return this._ctx.rotate(rotate);
};
CanvasContextImplement.prototype.translate = function (x, y) {
return this._ctx.translate(x, y);
};
CanvasContextImplement.prototype.save = function () {
return this._ctx.save();
};
CanvasContextImplement.prototype.restore = function () {
return this._ctx.restore();
};
CanvasContextImplement.prototype.clearRect = function (x, y, width, height) {
return this._ctx.clearRect(x, y, width, height);
};
CanvasContextImplement.prototype.fillText = function (text, x, y, maxWidth) {
return this._ctx.fillText(text, x, y, maxWidth);
};
CanvasContextImplement.prototype.moveTo = function (x, y) {
return this._ctx.moveTo(x, y);
};
CanvasContextImplement.prototype.rect = function (x, y, width, height) {
return this._ctx.rect(x, y, width, height);
};
CanvasContextImplement.prototype.arc = function (x, y, r, sAngle, eAngle, anticlockwise) {
return this._ctx.arc(x, y, r, sAngle, eAngle, anticlockwise);
};
CanvasContextImplement.prototype.quadraticCurveTo = function (cpx, cpy, x, y) {
return this._ctx.quadraticCurveTo(cpx, cpy, x, y);
};
CanvasContextImplement.prototype.bezierCurveTo = function (cp1x, cp1y, cp2x, cp2y, x, y) {
return this._ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
};
CanvasContextImplement.prototype.closePath = function () {
return this._ctx.closePath();
};
return CanvasContextImplement;
}());
export default CanvasContextImplement;
//# sourceMappingURL=CanvasContext.js.map