class CanvasImage {
|
/**
|
* 初始化类
|
*
|
* @param {[object]} el canvas所在的容器
|
* @param {[object]} option 配置项
|
*
|
* @return {[object]} canvasImage实例化对象
|
*/
|
constructor(el, option) {
|
this.el = el;
|
this.option = option;
|
this.cvs = "";
|
this.ctx = "";
|
this.width = 100;
|
this.height = 100;
|
|
// 初始化内容
|
this.init(el, option);
|
}
|
|
init(el, option) {
|
// 设置容器的宽高
|
this.setWidth(option);
|
this.setHeight(option);
|
|
// 生成canvas容器和canvas
|
this.createElement(el);
|
}
|
|
createElement(el) {
|
// 生成容器
|
const ctn = document.createElement('div');
|
ctn.style.width = "100%";
|
ctn.style.height = "100%";
|
|
// 生成canvas
|
const cvs = document.createElement('canvas');
|
cvs.width = this.width;
|
cvs.height = this.height;
|
cvs.style.width = "100%";
|
cvs.style.height = "100%";
|
cvs.style.objectFit = "contain";
|
|
this.cvs = cvs;
|
this.ctx = cvs.getContext('2d');
|
|
// 添加canvas
|
ctn.appendChild(cvs);
|
|
// 添加容器
|
el.appendChild(ctn);
|
}
|
|
/**
|
* 设置canvas的宽度
|
*
|
* @param {[type]} option 配置项
|
*
|
* @return {[type]} 无
|
*/
|
setWidth(option) {
|
if(typeof option == 'object' && typeof option.width != 'undefined') {
|
this.width = option.width;
|
}else {
|
this.width = 100;
|
}
|
}
|
|
/**
|
* 设置canvas的高度
|
*
|
* @param {[type]} option 配置项
|
*
|
* @return {[type]} 无
|
*/
|
setHeight(option) {
|
if(typeof option == 'object' && typeof option.height != 'undefined') {
|
this.height = option.height;
|
}else {
|
this.height = 100;
|
}
|
}
|
|
}
|
|
export default CanvasImage;
|
