@antv/f-my
Version:
FEngine for alipay mini-program
400 lines • 13 kB
JavaScript
function preloadCanvasImage(url, callback) {
my.preloadCanvasImage({
urls: [url],
complete: function complete(res) {
if (res && res.loaded) {
var img = res.loaded[url];
if (img.url == url && img.id !== -1) {
callback(img);
return;
}
}
callback(null);
}
});
}
export function createCanvasAdapter(canvasContext) {
var element = new CanvasElement(canvasContext);
var context = new SimulatedCanvasContext(canvasContext);
context.canvas = element;
return {
element: element,
context: context
// debugger for unimplemented property/method
// element: new Proxy(element, {
// get(target, p, receiver) {
// const descriptor = Object.getOwnPropertyDescriptor(target, p);
// const descriptor2 = Object.getOwnPropertyDescriptor((target as any).__proto__, p);
// if (!descriptor && !descriptor2) {
// debugger;
// }
// return Reflect.get(target, p, receiver);
// }
// }),
// context: new Proxy(context, {
// get(target, p, receiver) {
// const descriptor = Object.getOwnPropertyDescriptor(target, p);
// const descriptor2 = Object.getOwnPropertyDescriptor((target as any).__proto__, p);
// if (!descriptor && !descriptor2) {
// debugger;
// }
// return Reflect.get(target, p, receiver);
// }
// })
};
}
function bindDrawRunnable(fn, canvasContext) {
return function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
try {
fn.apply(this, args);
} finally {
canvasContext.draw(true);
}
};
}
var CanvasImageElement = /** @class */function () {
function CanvasImageElement(url, _context) {
var _this = this;
this.url = url;
this._context = _context;
this._invoked = false;
this._rawImgObj = undefined;
preloadCanvasImage(url, function (img) {
_this._rawImgObj = img || {};
_this._complete(_this._rawImgObj);
});
}
CanvasImageElement.toImageSource = function (imageOrContext) {
var target = null;
if (imageOrContext instanceof CanvasImageElement) {
target = imageOrContext._rawImgObj;
} else if (typeof imageOrContext === 'string') {
target = imageOrContext;
}
return target;
};
CanvasImageElement.prototype._complete = function (img) {
if (!img || this._invoked) {
return;
}
if (img.url == this.url && img.id !== -1) {
if (this._onload) {
bindDrawRunnable(this._onload, this._context)();
this._invoked = true;
}
} else {
if (this._onerror) {
bindDrawRunnable(this._onerror, this._context)();
this._invoked = true;
}
}
};
Object.defineProperty(CanvasImageElement.prototype, "onload", {
set: function set(fn) {
this._onload = fn;
this._complete(this._rawImgObj);
},
enumerable: false,
configurable: true
});
Object.defineProperty(CanvasImageElement.prototype, "onerror", {
set: function set(fn) {
this._onerror = fn;
this._complete(this._rawImgObj);
},
enumerable: false,
configurable: true
});
return CanvasImageElement;
}();
var CanvasElement = /** @class */function () {
function CanvasElement(canvasContext, offscreenCanvas) {
if (offscreenCanvas === void 0) {
offscreenCanvas = my.createOffscreenCanvas ? my.createOffscreenCanvas() : {
requestAnimationFrame: function requestAnimationFrame() {}
};
}
this.canvasContext = canvasContext;
this.offscreenCanvas = offscreenCanvas;
}
CanvasElement.prototype.createImage = function (url) {
return new CanvasImageElement(url, this.canvasContext);
};
CanvasElement.prototype.requestAnimationFrame = function (fn) {
var frameFn = bindDrawRunnable(fn, this.canvasContext);
return this.offscreenCanvas.requestAnimationFrame(function () {
frameFn(Date.now());
});
};
CanvasElement.prototype.cancelAnimationFrame = function (tid) {
return this.offscreenCanvas.cancelAnimationFrame(tid);
};
return CanvasElement;
}();
var SimulatedCanvasContext = /** @class */function () {
function SimulatedCanvasContext(ctx) {
this.ctx = ctx;
this._globalAlpha = 1;
}
Object.defineProperty(SimulatedCanvasContext.prototype, "fillStyle", {
get: function get() {
return this._fillStyle;
},
set: function set(value) {
this._fillStyle = this.ctx.fillStyle = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(SimulatedCanvasContext.prototype, "font", {
get: function get() {
return this.ctx.font;
},
// WontFIX: filter
set: function set(value) {
this.ctx.font = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(SimulatedCanvasContext.prototype, "fontSize", {
set: function set(value) {
this.ctx.fontSize = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(SimulatedCanvasContext.prototype, "globalAlpha", {
get: function get() {
return this._globalAlpha;
},
set: function set(value) {
this._globalAlpha = this.ctx.globalAlpha = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(SimulatedCanvasContext.prototype, "globalCompositeOperation", {
get: function get() {
return this._globalCompositeOperation;
},
set: function set(value) {
this._globalCompositeOperation = this.ctx.globalCompositeOperation = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(SimulatedCanvasContext.prototype, "lineCap", {
get: function get() {
return this._lineCap;
},
set: function set(value) {
this._lineCap = this.ctx.lineCap = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(SimulatedCanvasContext.prototype, "lineDashOffset", {
get: function get() {
return this._lineDashOffset;
},
set: function set(value) {
this._lineDashOffset = this.ctx.lineDashOffset = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(SimulatedCanvasContext.prototype, "lineJoin", {
get: function get() {
return this._lineJoin;
},
set: function set(value) {
this._lineJoin = this.ctx.lineJoin = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(SimulatedCanvasContext.prototype, "lineWidth", {
get: function get() {
return this._lineWidth;
},
set: function set(value) {
this.ctx.lineWidth = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(SimulatedCanvasContext.prototype, "miterLimit", {
get: function get() {
return this._miterLimit;
},
set: function set(value) {
this._miterLimit = this.ctx.miterLimit = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(SimulatedCanvasContext.prototype, "strokeStyle", {
get: function get() {
return this._strokeStyle;
},
set: function set(value) {
this._strokeStyle = this.ctx.strokeStyle = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(SimulatedCanvasContext.prototype, "textAlign", {
get: function get() {
return this._textAlign;
},
set: function set(value) {
this._textAlign = this.ctx.textAlign = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(SimulatedCanvasContext.prototype, "textBaseline", {
get: function get() {
return this._textBaseline;
},
set: function set(value) {
this._textBaseline = this.ctx.textBaseline = value;
},
enumerable: false,
configurable: true
});
SimulatedCanvasContext.prototype.arc = function (x, y, radius, startDeg, endDeg, anticlockwise) {
if (anticlockwise === undefined) {
return this.ctx.arc(x, y, radius, startDeg, endDeg);
}
return this.ctx.arc(x, y, radius, startDeg, endDeg, anticlockwise);
};
SimulatedCanvasContext.prototype.arcTo = function (x1, y1, x2, y2, radius) {
return this.ctx.arcTo(x1, y1, x2, y2, radius);
};
SimulatedCanvasContext.prototype.beginPath = function () {
return this.ctx.beginPath();
};
SimulatedCanvasContext.prototype.bezierCurveTo = function (cp1x, cp1y, cp2x, cp2y, x, y) {
return this.ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
};
SimulatedCanvasContext.prototype.clearRect = function (x, y, width, height) {
return this.ctx.clearRect(x, y, width, height);
};
SimulatedCanvasContext.prototype.clip = function () {
return this.ctx.clip();
};
SimulatedCanvasContext.prototype.closePath = function () {
return this.ctx.closePath();
};
// WontFIX: createImageData
SimulatedCanvasContext.prototype.createLinearGradient = function (x0, y0, x1, y1) {
return this.ctx.createLinearGradient(x0, y0, x1, y1);
};
SimulatedCanvasContext.prototype.createPattern = function (image, repeat) {
var target = CanvasImageElement.toImageSource(image);
return this.ctx.createPattern(target, repeat);
};
SimulatedCanvasContext.prototype.createRadialGradient = function (x0, y0, r0, x1, y1, r1) {
return this.ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);
};
// WontFIX: createPath2D
SimulatedCanvasContext.prototype.drawImage = function (imageOrContext, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) {
var target = CanvasImageElement.toImageSource(imageOrContext);
if (!target) {
return;
}
if (sWidth === undefined) {
this.ctx.drawImage(target, sx, sy);
} else if (dx === undefined) {
this.ctx.drawImage(target, sx, sy, sWidth, sHeight);
} else {
this.ctx.drawImage(target, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
}
};
SimulatedCanvasContext.prototype.ellipse = function (x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise) {
this.save();
this.translate(x, y);
this.rotate(rotation);
this.scale(radiusX, radiusY);
this.arc(0, 0, 1, startAngle, endAngle, anticlockwise);
this.restore();
};
SimulatedCanvasContext.prototype.fill = function () {
return this.ctx.fill();
};
SimulatedCanvasContext.prototype.fillRect = function (x, y, width, height) {
return this.ctx.fillRect(x, y, width, height);
};
SimulatedCanvasContext.prototype.fillText = function (text, x, y, maxWidth) {
if (maxWidth === undefined) {
return this.ctx.fillText(text, x, y);
}
return this.ctx.fillText(text, x, y, maxWidth);
};
// WontFIX: getImageData
// WontFIX: getLineDash
// WontFIX: getTransform
// Only For Offscreen: isPointInPath
// WontFIX: isPointInStroke
SimulatedCanvasContext.prototype.lineTo = function (x, y) {
return this.ctx.lineTo(x, y);
};
// Only For Offscreen: measureText
SimulatedCanvasContext.prototype.moveTo = function (x, y) {
return this.ctx.moveTo(x, y);
};
// WontFIX: putImageData
SimulatedCanvasContext.prototype.quadraticCurveTo = function (cpx, cpy, x, y) {
return this.ctx.quadraticCurveTo(cpx, cpy, x, y);
};
SimulatedCanvasContext.prototype.rect = function (x, y, width, height) {
return this.ctx.rect(x, y, width, height);
};
SimulatedCanvasContext.prototype.resetTransform = function () {
return this.setTransform(1, 0, 0, 1, 0, 0);
};
SimulatedCanvasContext.prototype.restore = function () {
return this.ctx.restore();
};
SimulatedCanvasContext.prototype.rotate = function (angle) {
return this.ctx.rotate(angle);
};
// WontFIX: roundRect
SimulatedCanvasContext.prototype.save = function () {
return this.ctx.save();
};
SimulatedCanvasContext.prototype.scale = function (x, y) {
return this.ctx.scale(x, y);
};
SimulatedCanvasContext.prototype.setLineDash = function (gaps) {
return this.ctx.setLineDash(gaps);
};
SimulatedCanvasContext.prototype.setTransform = function (a, b, c, d, e, f) {
return this.ctx.setTransform(a, b, c, d, e, f);
};
SimulatedCanvasContext.prototype.stroke = function () {
return this.ctx.stroke();
};
SimulatedCanvasContext.prototype.strokeRect = function (x, y, width, height) {
return this.ctx.fillRect(x, y, width, height);
};
SimulatedCanvasContext.prototype.strokeText = function (text, x, y, maxWidth) {
if (maxWidth === undefined) {
this.ctx.strokeText(text, x, y);
}
return this.ctx.strokeText(text, x, y, maxWidth);
};
SimulatedCanvasContext.prototype.transform = function (a, b, c, d, e, f) {
return this.ctx.transform(a, b, c, d, e, f);
};
SimulatedCanvasContext.prototype.translate = function (x, y) {
return this.ctx.translate(x, y);
};
return SimulatedCanvasContext;
}();