cssEngine/index.js

class Engine {
  constructor(element = document.body, options = {}) {
    // 默认配置
    const defaultOptions = {
      // 舞台宽度
      width: 800,
      // 舞台高度
      height: 600,
      // 舞台背景颜色
      background: 'transparent',
    }
    // 合并配置
    this.options = { ...defaultOptions, ...options }
    this.images = []
    this.width = this.options.width
    this.height = this.options.height

    // 创建舞台
    this.element = document.querySelector(element)
    this.stage = document.createElement('div')
    // 引擎ID
    const engineId = new Date().getTime()
    // 转换为16进制
    const engineIdHex = engineId.toString(16)
    this.id = engineIdHex
    this.stage.setAttribute('data-engine-id', this.id)
    // 设置舞台样式
    this.stage.style.width = `${this.options.width}px`
    this.stage.style.height = `${this.options.height}px`
    this.stage.style.position = 'relative'
    this.stage.style.userSelect = 'none'
    this.stage.style.overflow = 'hidden'
    this.stage.style.background = this.options.background
    // 启用硬件加速
    this.stage.style.transform = 'translateZ(0)'

    // 添加子元素
    this.stage.add = function (child) {
      child && this.appendChild(child)
    }
    // 移除子元素
    this.stage.remove = function (child) {
      child && this.removeChild(child)
    }

    this.element.appendChild(this.stage)
    return this
  }
  // 加载资源
  Load(src = '') {
    return new Promise((resolve, reject) => {
      let img = new Image()
      img.src = src
      img.onload = () => {
        resolve(img)
      }
      img.onerror = e => {
        reject(e)
      }
    })
  }
  // 创建精灵
  CreateSprite(img, x = 0, y = 0, width = 0, height = 0) {
    const div = document.createElement('div')
    const imgElement = document.createElement('img')
    imgElement.src = img.src
    imgElement.style.cssText = '-webkit-user-drag: none;user-drag: none;'
    div.style.position = 'absolute'

    div.setAttribute('data-sprite-id', this.id)
    div.appendChild(imgElement)
    this.images.push(imgElement)

    // 设置图片位置
    div.setPosition = function (x = 0, y = 0) {
      div.style.left = `${x}px`
      div.style.top = `${y}px`
      div.x = x
      div.y = y
    }
    div.setPosition(x, y)
    // 设置图片尺寸
    div.setSize = function (width = 0, height = 0) {
      if (width) {
        if (typeof width === 'number') {
          div.style.width = `${width}px`
        } else {
          div.style.width = width
        }
      }
      if (height) {
        if (typeof height === 'number') {
          div.style.height = `${height}px`
        } else {
          div.style.height = height
        }
      }
      div.width = width
      div.height = height
    }
    div.setSize(width, height)
    // 设置样式
    div.setStyle = function (style) {
      div.style.cssText += style
    }
    // 添加子元素
    div.add = function (child) {
      child && div.appendChild(child)
    }
    // 移除子元素
    div.remove = function (child) {
      child && div.removeChild(child)
    }
    // 添加事件
    div.on = function (event, callback) {
      div.addEventListener(event, callback)
    }
    // 移除事件
    div.off = function (event, callback) {
      div.removeEventListener(event, callback)
    }
    // 添加动画
    div.animate = function (keyframes) {
      div.style.keyframes = keyframes
    }
    // 设置别名
    div.name = function (name) {
      div.setAttribute('data-name', name)
    }
    // 隐藏图片
    div.hide = function () {
      div.style.display = 'none'
    }
    // 显示图片
    div.show = function () {
      div.style.display = 'block'
    }
    return div
  }
  // 创建容器
  CreateBox(x = 0, y = 0, width = 0, height = 0) {
    const div = document.createElement('div')
    div.style.position = 'absolute'
    div.setAttribute('data-box-id', this.id)

    // 设置容器位置
    div.setPosition = function (x = 0, y = 0) {
      div.style.left = `${x}px`
      div.style.top = `${y}px`
      div.x = x
      div.y = y
    }
    div.setPosition(x, y)
    // 设置容器尺寸
    div.setSize = function (width = 0, height = 0) {
      if (width) {
        if (typeof width === 'number') {
          div.style.width = `${width}px`
        } else {
          div.style.width = width
        }
      }
      if (height) {
        if (typeof height === 'number') {
          div.style.height = `${height}px`
        } else {
          div.style.height = height
        }
      }
      div.width = width
      div.height = height
    }
    div.setSize(width, height)
    // 设置容器样式
    div.setStyle = function (style) {
      div.style.cssText += style
    }
    // 添加子元素
    div.add = function (child) {
      child && div.appendChild(child)
    }
    // 移除子元素
    div.remove = function (child) {
      child && div.removeChild(child)
    }
    // 添加事件
    div.on = function (event, callback) {
      div.addEventListener(event, callback)
    }
    // 移除事件
    div.off = function (event, callback) {
      div.removeEventListener(event, callback)
    }
    // 隐藏容器
    div.hide = function () {
      div.style.display = 'none'
    }
    // 显示容器
    div.show = function () {
      div.style.display = 'block'
    }
    return div
  }
  // 创建文本
  CreateText(text = '', x = 0, y = 0) {
    const div = document.createElement('div')
    div.style.position = 'absolute'
    div.setAttribute('data-text-id', this.id)

    // 设置文本位置
    div.setPosition = function (x = 0, y = 0) {
      div.style.left = `${x}px`
      div.style.top = `${y}px`
      div.x = x
      div.y = y
    }
    div.setPosition(x, y)
    // 设置文本内容
    div.set = function (text = '') {
      div.innerText = text
    }
    div.set(text)
    // 设置文本颜色
    div.setColor = function (color = '#000') {
      div.style.color = color
    }
    div.setColor(color)
    // 设置文本字体
    div.setFont = function (font = '16px sans-serif') {
      div.style.font = font
    }
    // 设置样式
    div.setStyle = function (style = 'color: #000;') {
      div.style.cssText += style
    }
    // 添加子元素
    div.add = function (child) {
      child && div.appendChild(child)
    }
    // 移除子元素
    div.remove = function (child) {
      child && div.removeChild(child)
    }
    return div
  }
  // 创建Html文本
  CreateHtml(html = '', x = 0, y = 0) {
    const div = document.createElement('div')
    div.style.position = 'absolute'
    div.setAttribute('data-html-id', this.id)

    // 设置Html位置
    div.setPosition = function (x = 0, y = 0) {
      div.style.left = `${x}px`
      div.style.top = `${y}px`
      div.x = x
      div.y = y
    }
    div.setPosition(x, y)
    // 设置Html内容
    div.set = function (html = '') {
      div.innerHTML = html
    }
    // 获取Html内容
    div.get = function () {
      return div.innerHTML
    }
    div.set(html)
    // 设置样式
    div.setStyle = function (style = 'color: #000;') {
      div.style.cssText += style
    }
    div.setStyle()
    // 获取尺寸
    div.getSize = function () {
      const { width, height } = div.getBoundingClientRect()
      return { width, height }
    }
    // 添加子元素
    div.add = function (child) {
      child && div.appendChild(child)
    }
    // 移除子元素
    div.remove = function (child) {
      child && div.removeChild(child)
    }
    return div
  }
  // 创建svg
  CreateSvg(x = 0, y = 0, width = 0, height = 0, content = '') {
    const div = document.createElement('div')
    div.innerHTML = content
    div.style.position = 'absolute'
    div.setAttribute('data-svg-id', this.id)

    // 设置svg位置
    div.setPosition = function (x = 0, y = 0) {
      div.style.left = `${x}px`
      div.style.top = `${y}px`
      div.x = x
      div.y = y
    }
    div.setPosition(x, y)
    // 设置svg尺寸
    div.setSize = function (width = 0, height = 0) {
      if (width) {
        if (typeof width === 'number') {
          div.style.width = `${width}px`
        } else {
          div.style.width = width
        }
      }
      if (height) {
        if (typeof height === 'number') {
          div.style.height = `${height}px`
        } else {
          div.style.height = height
        }
      }
      div.width = width
      div.height = height
    }
    div.setSize(width, height)
    // 设置样式
    div.setStyle = function (style) {
      div.style.cssText += style
    }
    // 设置svg内容
    div.setContent = function (content = '') {
      div.innerHTML = content
    }
    // 添加事件
    div.on = function (event, callback) {
      div.addEventListener(event, callback)
    }
    // 移除事件
    div.off = function (event, callback) {
      div.removeEventListener(event, callback)
    }
    return div
  }
  // 销毁舞台
  Destroy() {
    this.element.removeChild(this.stage)
    // 内存回收
    this.images = null
    this.stage = null
    this.element = null
    this.options = null
    this.width = null
    this.height = null
    this.id = null
  }
}