'使用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 {
|
||||
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 = typeof element === 'string' ? document.querySelector(element) : element
|
||||
this.id = Date.now().toString(16)
|
||||
|
||||
// 创建舞台
|
||||
this.element = document.querySelector(element)
|
||||
this.createStage()
|
||||
}
|
||||
|
||||
createStage() {
|
||||
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)
|
||||
}
|
||||
Object.assign(this.stage.style, {
|
||||
width: `${this.options.width}px`,
|
||||
height: `${this.options.height}px`,
|
||||
position: 'relative',
|
||||
userSelect: 'none',
|
||||
overflow: 'hidden',
|
||||
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)
|
||||
return this
|
||||
}
|
||||
// 加载资源
|
||||
Load(src = '') {
|
||||
|
||||
load(src = '') {
|
||||
return new Promise((resolve, reject) => {
|
||||
let img = new Image()
|
||||
const img = new Image()
|
||||
img.src = src
|
||||
img.onload = () => {
|
||||
resolve(img)
|
||||
}
|
||||
img.onerror = e => {
|
||||
reject(e)
|
||||
}
|
||||
img.onload = () => resolve(img)
|
||||
img.onerror = reject
|
||||
this.images.push(img)
|
||||
})
|
||||
}
|
||||
// 创建精灵
|
||||
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
|
||||
createSprite(img, x = 0, y = 0, width = 0, height = 0) {
|
||||
return new Sprite(img, x, y, width, height, this.id)
|
||||
}
|
||||
// 创建容器
|
||||
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
|
||||
createBox(x = 0, y = 0, width = 0, height = 0) {
|
||||
return new Box(x, y, width, height, this.id)
|
||||
}
|
||||
// 创建文本
|
||||
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
|
||||
createText(text = '', x = 0, y = 0) {
|
||||
return new TextElement(text, x, y, this.id)
|
||||
}
|
||||
// 创建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
|
||||
createHtml(html = '', x = 0, y = 0) {
|
||||
return new HtmlElement(html, x, y, this.id)
|
||||
}
|
||||
// 创建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
|
||||
createSvg(x = 0, y = 0, width = 0, height = 0, content = '') {
|
||||
return new SvgElement(x, y, width, height, content, this.id)
|
||||
}
|
||||
// 销毁舞台
|
||||
Destroy() {
|
||||
this.element.removeChild(this.stage)
|
||||
// 内存回收
|
||||
this.images = null
|
||||
|
||||
destroy() {
|
||||
if (this.stage && this.stage.parentNode) {
|
||||
this.stage.parentNode.removeChild(this.stage)
|
||||
}
|
||||
|
||||
// 清理所有图像引用
|
||||
this.images.forEach(img => {
|
||||
img.onload = null
|
||||
img.onerror = null
|
||||
img.src = ''
|
||||
})
|
||||
|
||||
// 清除所有引用
|
||||
this.images = []
|
||||
this.stage = null
|
||||
this.element = null
|
||||
this.options = null
|
||||
this.width = null
|
||||
this.height = null
|
||||
this.id = null
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user