'使用deepseek重构了代码逻辑；'
This commit is contained in:
yuantao
497
index.js
497
index.js
@@ -1,354 +1,217 @@
|
|||||||
|
class BaseElement {
|
||||||
|
constructor(elementType = 'div', engineId) {
|
||||||
|
this.element = document.createElement(elementType)
|
||||||
|
this.element.style.position = 'absolute'
|
||||||
|
this.engineId = engineId
|
||||||
|
this.x = 0
|
||||||
|
this.y = 0
|
||||||
|
this.width = 0
|
||||||
|
this.height = 0
|
||||||
|
}
|
||||||
|
|
||||||
|
setPosition(x = 0, y = 0) {
|
||||||
|
this.element.style.left = `${x}px`
|
||||||
|
this.element.style.top = `${y}px`
|
||||||
|
this.x = x
|
||||||
|
this.y = y
|
||||||
|
}
|
||||||
|
|
||||||
|
setSize(width = 0, height = 0) {
|
||||||
|
if (width) {
|
||||||
|
this.element.style.width = typeof width === 'number' ? `${width}px` : width
|
||||||
|
this.width = width
|
||||||
|
}
|
||||||
|
if (height) {
|
||||||
|
this.element.style.height = typeof height === 'number' ? `${height}px` : height
|
||||||
|
this.height = height
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setStyle(style) {
|
||||||
|
Object.assign(this.element.style, style)
|
||||||
|
}
|
||||||
|
|
||||||
|
add(child) {
|
||||||
|
child && this.element.appendChild(child.element || child)
|
||||||
|
}
|
||||||
|
|
||||||
|
remove(child) {
|
||||||
|
child && this.element.removeChild(child.element || child)
|
||||||
|
}
|
||||||
|
|
||||||
|
on(event, callback) {
|
||||||
|
this.element.addEventListener(event, callback)
|
||||||
|
}
|
||||||
|
|
||||||
|
off(event, callback) {
|
||||||
|
this.element.removeEventListener(event, callback)
|
||||||
|
}
|
||||||
|
|
||||||
|
hide() {
|
||||||
|
this.element.style.display = 'none'
|
||||||
|
}
|
||||||
|
|
||||||
|
show() {
|
||||||
|
this.element.style.display = 'block'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class Sprite extends BaseElement {
|
||||||
|
constructor(img, x, y, width, height, engineId) {
|
||||||
|
super('div', engineId)
|
||||||
|
this.imgElement = document.createElement('img')
|
||||||
|
this.imgElement.src = img.src
|
||||||
|
this.imgElement.style.cssText = '-webkit-user-drag: none; user-drag: none;'
|
||||||
|
this.element.appendChild(this.imgElement)
|
||||||
|
|
||||||
|
this.setPosition(x, y)
|
||||||
|
this.setSize(width, height)
|
||||||
|
this.element.setAttribute('data-sprite-id', engineId)
|
||||||
|
|
||||||
|
// 精灵特有方法
|
||||||
|
this.name = name => this.element.setAttribute('data-name', name)
|
||||||
|
this.animate = keyframes => (this.element.style.animation = keyframes)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class Box extends BaseElement {
|
||||||
|
constructor(x, y, width, height, engineId) {
|
||||||
|
super('div', engineId)
|
||||||
|
this.setPosition(x, y)
|
||||||
|
this.setSize(width, height)
|
||||||
|
this.element.setAttribute('data-box-id', engineId)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class TextElement extends BaseElement {
|
||||||
|
constructor(text, x, y, engineId) {
|
||||||
|
super('div', engineId)
|
||||||
|
this.element.innerText = text
|
||||||
|
this.setPosition(x, y)
|
||||||
|
this.element.setAttribute('data-text-id', engineId)
|
||||||
|
|
||||||
|
// 文本特有方法
|
||||||
|
this.set = text => (this.element.innerText = text)
|
||||||
|
this.setColor = color => (this.element.style.color = color)
|
||||||
|
this.setFont = font => (this.element.style.font = font)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class HtmlElement extends BaseElement {
|
||||||
|
constructor(html, x, y, engineId) {
|
||||||
|
super('div', engineId)
|
||||||
|
this.element.innerHTML = html
|
||||||
|
this.setPosition(x, y)
|
||||||
|
this.element.setAttribute('data-html-id', engineId)
|
||||||
|
|
||||||
|
// HTML特有方法
|
||||||
|
this.set = html => (this.element.innerHTML = html)
|
||||||
|
this.get = () => this.element.innerHTML
|
||||||
|
this.getSize = () => {
|
||||||
|
const rect = this.element.getBoundingClientRect()
|
||||||
|
return { width: rect.width, height: rect.height }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class SvgElement extends BaseElement {
|
||||||
|
constructor(x, y, width, height, content, engineId) {
|
||||||
|
super('div', engineId)
|
||||||
|
this.element.innerHTML = content
|
||||||
|
this.setPosition(x, y)
|
||||||
|
this.setSize(width, height)
|
||||||
|
this.element.setAttribute('data-svg-id', engineId)
|
||||||
|
|
||||||
|
// SVG特有方法
|
||||||
|
this.setContent = content => (this.element.innerHTML = content)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
class Engine {
|
class Engine {
|
||||||
constructor(element = document.body, options = {}) {
|
constructor(element = document.body, options = {}) {
|
||||||
// 默认配置
|
|
||||||
const defaultOptions = {
|
const defaultOptions = {
|
||||||
// 舞台宽度
|
|
||||||
width: 800,
|
width: 800,
|
||||||
// 舞台高度
|
|
||||||
height: 600,
|
height: 600,
|
||||||
// 舞台背景颜色
|
|
||||||
background: 'transparent',
|
background: 'transparent',
|
||||||
}
|
}
|
||||||
// 合并配置
|
|
||||||
this.options = { ...defaultOptions, ...options }
|
this.options = { ...defaultOptions, ...options }
|
||||||
this.images = []
|
this.images = []
|
||||||
this.width = this.options.width
|
this.width = this.options.width
|
||||||
this.height = this.options.height
|
this.height = this.options.height
|
||||||
|
this.element = typeof element === 'string' ? document.querySelector(element) : element
|
||||||
|
this.id = Date.now().toString(16)
|
||||||
|
|
||||||
// 创建舞台
|
this.createStage()
|
||||||
this.element = document.querySelector(element)
|
}
|
||||||
|
|
||||||
|
createStage() {
|
||||||
this.stage = document.createElement('div')
|
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.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)'
|
|
||||||
|
|
||||||
// 添加子元素
|
Object.assign(this.stage.style, {
|
||||||
this.stage.add = function (child) {
|
width: `${this.options.width}px`,
|
||||||
child && this.appendChild(child)
|
height: `${this.options.height}px`,
|
||||||
}
|
position: 'relative',
|
||||||
// 移除子元素
|
userSelect: 'none',
|
||||||
this.stage.remove = function (child) {
|
overflow: 'hidden',
|
||||||
child && this.removeChild(child)
|
background: this.options.background,
|
||||||
}
|
transform: 'translateZ(0)',
|
||||||
|
})
|
||||||
|
|
||||||
|
// 添加舞台操作方法
|
||||||
|
this.stage.add = child => child && this.stage.appendChild(child.element || child)
|
||||||
|
this.stage.remove = child => child && this.stage.removeChild(child.element || child)
|
||||||
|
|
||||||
this.element.appendChild(this.stage)
|
this.element.appendChild(this.stage)
|
||||||
return this
|
|
||||||
}
|
}
|
||||||
// 加载资源
|
|
||||||
Load(src = '') {
|
load(src = '') {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
let img = new Image()
|
const img = new Image()
|
||||||
img.src = src
|
img.src = src
|
||||||
img.onload = () => {
|
img.onload = () => resolve(img)
|
||||||
resolve(img)
|
img.onerror = reject
|
||||||
}
|
this.images.push(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)
|
createSprite(img, x = 0, y = 0, width = 0, height = 0) {
|
||||||
div.appendChild(imgElement)
|
return new Sprite(img, x, y, width, height, this.id)
|
||||||
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)
|
|
||||||
|
|
||||||
// 设置容器位置
|
createBox(x = 0, y = 0, width = 0, height = 0) {
|
||||||
div.setPosition = function (x = 0, y = 0) {
|
return new Box(x, y, width, height, this.id)
|
||||||
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)
|
|
||||||
|
|
||||||
// 设置文本位置
|
createText(text = '', x = 0, y = 0) {
|
||||||
div.setPosition = function (x = 0, y = 0) {
|
return new TextElement(text, x, y, this.id)
|
||||||
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位置
|
createHtml(html = '', x = 0, y = 0) {
|
||||||
div.setPosition = function (x = 0, y = 0) {
|
return new HtmlElement(html, x, y, this.id)
|
||||||
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位置
|
createSvg(x = 0, y = 0, width = 0, height = 0, content = '') {
|
||||||
div.setPosition = function (x = 0, y = 0) {
|
return new SvgElement(x, y, width, height, content, this.id)
|
||||||
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() {
|
destroy() {
|
||||||
this.element.removeChild(this.stage)
|
if (this.stage && this.stage.parentNode) {
|
||||||
// 内存回收
|
this.stage.parentNode.removeChild(this.stage)
|
||||||
this.images = null
|
}
|
||||||
|
|
||||||
|
// 清理所有图像引用
|
||||||
|
this.images.forEach(img => {
|
||||||
|
img.onload = null
|
||||||
|
img.onerror = null
|
||||||
|
img.src = ''
|
||||||
|
})
|
||||||
|
|
||||||
|
// 清除所有引用
|
||||||
|
this.images = []
|
||||||
this.stage = null
|
this.stage = null
|
||||||
this.element = null
|
this.element = null
|
||||||
this.options = null
|
this.options = null
|
||||||
this.width = null
|
|
||||||
this.height = null
|
|
||||||
this.id = null
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user