678 lines
20 KiB
JavaScript
678 lines
20 KiB
JavaScript
const spine = require('../../vendor/spine.js')
|
||
const env = require('../../utils/spine-env.js')
|
||
|
||
const core = spine.core
|
||
const webgl = spine.webgl
|
||
|
||
const IMAGE_RE = /\.(png|jpg|jpeg|webp)$/i
|
||
|
||
Page({
|
||
data: {
|
||
status: 'idle', // idle | loading | ready | error
|
||
statusText: '',
|
||
errorMsg: '',
|
||
animations: [],
|
||
animIndex: 0,
|
||
playing: true,
|
||
loop: true,
|
||
premultiplied: true,
|
||
speed: 1,
|
||
scalePercent: 100,
|
||
info: '',
|
||
pickedText: '',
|
||
pickedFiles: [],
|
||
pickedCount: 0,
|
||
missingText: '',
|
||
},
|
||
|
||
// ---- 非响应式运行时字段 ----
|
||
_canvas: null,
|
||
_gl: null,
|
||
_managed: null,
|
||
_shader: null,
|
||
_batcher: null,
|
||
_renderer: null,
|
||
_skeleton: null,
|
||
_state: null,
|
||
_skeletonData: null,
|
||
_pma: false,
|
||
_dpr: 1,
|
||
_baseScale: 1,
|
||
_viewScale: 1,
|
||
_tx: 0,
|
||
_ty: 0,
|
||
_fitOffset: null,
|
||
_fitSize: null,
|
||
_lastSizeCheck: 0,
|
||
_lastTime: 0,
|
||
_raf: null,
|
||
_ready: false,
|
||
_touch: null,
|
||
_pinch: null,
|
||
_picked: [],
|
||
|
||
onReady() {
|
||
env.installWebGLShim()
|
||
this.initCanvas()
|
||
// 首帧布局可能尚未稳定，稍后重新同步一次画布尺寸，避免画面比例被拉伸
|
||
setTimeout(() => this.syncCanvasSize(), 150)
|
||
},
|
||
|
||
onResize() {
|
||
if (this._resizeTimer) clearTimeout(this._resizeTimer)
|
||
this._resizeTimer = setTimeout(() => this.syncCanvasSize(), 100)
|
||
},
|
||
|
||
onHide() {
|
||
this.stopLoop()
|
||
},
|
||
|
||
onShow() {
|
||
if (this._ready) this.startLoop()
|
||
},
|
||
|
||
onUnload() {
|
||
this.stopLoop()
|
||
this._ready = false
|
||
},
|
||
|
||
// ---------------- 初始化 WebGL ----------------
|
||
initCanvas() {
|
||
wx.createSelectorQuery()
|
||
.in(this)
|
||
.select('#spineCanvas')
|
||
.fields({ node: true })
|
||
// 画布节点返回的 size 是缓冲区尺寸（不是当前布局尺寸），
|
||
// 所以量外面这层普通 view 来定缓冲区大小，否则布局一变画面就会被拉伸
|
||
.select('#stageBox')
|
||
.fields({ size: true })
|
||
.exec((res) => {
|
||
const canvasHit = res && res[0]
|
||
const stageHit = res && res[1]
|
||
if (!canvasHit || !canvasHit.node) {
|
||
this.setData({
|
||
status: 'error',
|
||
errorMsg: '取不到 canvas 节点，请确认基础库支持 <canvas type="webgl">',
|
||
})
|
||
return
|
||
}
|
||
|
||
const canvas = canvasHit.node
|
||
const size = (stageHit && stageHit.size) || { width: 300, height: 300 }
|
||
|
||
let dpr = 1
|
||
try {
|
||
const info = wx.getWindowInfo ? wx.getWindowInfo() : wx.getSystemInfoSync()
|
||
dpr = info.pixelRatio || 1
|
||
} catch (e) {
|
||
dpr = 1
|
||
}
|
||
this._dpr = dpr
|
||
|
||
const w = Math.max(1, Math.floor((size.width || 300) * dpr))
|
||
const h = Math.max(1, Math.floor((size.height || 300) * dpr))
|
||
canvas.width = w
|
||
canvas.height = h
|
||
|
||
let gl = null
|
||
try {
|
||
gl = canvas.getContext('webgl', { alpha: true, antialias: true, premultipliedAlpha: true })
|
||
} catch (e) {
|
||
gl = null
|
||
}
|
||
if (!gl) {
|
||
try {
|
||
gl = canvas.getContext('webgl')
|
||
} catch (e) {
|
||
gl = null
|
||
}
|
||
}
|
||
if (!gl) {
|
||
this.setData({
|
||
status: 'error',
|
||
errorMsg: '当前环境不支持 WebGL，无法预览（请更新微信或基础库）',
|
||
})
|
||
return
|
||
}
|
||
|
||
try {
|
||
this._canvas = canvas
|
||
this._gl = gl
|
||
this._managed = env.wrapGLContext(webgl, gl, w, h)
|
||
this._shader = webgl.Shader.newTwoColoredTextured(this._managed)
|
||
this._batcher = new webgl.PolygonBatcher(this._managed)
|
||
this._renderer = new webgl.SkeletonRenderer(this._managed)
|
||
} catch (e) {
|
||
this.setData({
|
||
status: 'error',
|
||
errorMsg: 'WebGL 初始化失败：' + ((e && e.message) || String(e)),
|
||
})
|
||
return
|
||
}
|
||
|
||
this.setData({ status: 'idle' })
|
||
this.syncCanvasSize()
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 同步画布缓冲区尺寸到当前显示尺寸（含 dpr）。
|
||
* 面板内容变化会让画布显示区域改变，若不重新同步，
|
||
* 缓冲区与显示区比例不一致就会导致画面被拉伸/挤压。
|
||
*/
|
||
syncCanvasSize() {
|
||
if (!this._canvas || !this._gl) return
|
||
wx.createSelectorQuery()
|
||
.in(this)
|
||
.select('#stageBox')
|
||
.fields({ size: true })
|
||
.exec((res) => {
|
||
const hit = res && res[0]
|
||
if (!hit || !hit.size) return
|
||
const size = hit.size
|
||
if (!size.width || !size.height) return
|
||
|
||
const w = Math.max(1, Math.round(size.width * this._dpr))
|
||
const h = Math.max(1, Math.round(size.height * this._dpr))
|
||
if (this._canvas.width === w && this._canvas.height === h) return
|
||
|
||
this._canvas.width = w
|
||
this._canvas.height = h
|
||
|
||
// 尺寸变化后重新适配，保证画面比例与缩放正确
|
||
if (this._fitOffset && this._fitSize) {
|
||
this._baseScale = this.computeFitScale()
|
||
this.centerView()
|
||
}
|
||
})
|
||
},
|
||
|
||
// ---------------- 选择并加载文件（支持多选 / 多次累积）----------------
|
||
chooseFiles() {
|
||
wx.chooseMessageFile({
|
||
count: 20,
|
||
type: 'all',
|
||
success: (res) => {
|
||
this.mergeFiles(res.tempFiles || [])
|
||
},
|
||
fail: (err) => {
|
||
const msg = (err && err.errMsg) || ''
|
||
if (msg.indexOf('cancel') >= 0) return
|
||
this.setData({ status: 'error', errorMsg: '选择文件失败：' + (msg || '未知错误') })
|
||
},
|
||
})
|
||
},
|
||
|
||
// 按扩展名分类
|
||
classify(files) {
|
||
const lower = (n) => String(n || '').toLowerCase()
|
||
return {
|
||
skel: files.find((f) => lower(f.name).endsWith('.skel')) || null,
|
||
json: files.find((f) => lower(f.name).endsWith('.json')) || null,
|
||
atlas: files.find((f) => lower(f.name).endsWith('.atlas')) || null,
|
||
images: files.filter((f) => IMAGE_RE.test(lower(f.name))),
|
||
}
|
||
},
|
||
|
||
// 累积已选文件：既支持一次多选，也支持分多次挑选（自动去重）
|
||
mergeFiles(incoming) {
|
||
const picked = this._picked || []
|
||
incoming.forEach((f) => {
|
||
const dup = picked.some((p) => p.name === f.name && p.size === f.size)
|
||
if (!dup) picked.push({ name: f.name, path: f.path, size: f.size })
|
||
})
|
||
this._picked = picked
|
||
this.refreshPickedUI()
|
||
},
|
||
|
||
refreshPickedUI() {
|
||
const picked = this._picked || []
|
||
const has = this.classify(picked)
|
||
const missing = []
|
||
if (!has.atlas) missing.push('.atlas')
|
||
if (!has.skel && !has.json) missing.push('.skel')
|
||
if (!has.images.length) missing.push('.png')
|
||
|
||
this.setData({
|
||
pickedText: picked.map((f) => f.name).join('、'),
|
||
pickedFiles: picked.map((f, index) => {
|
||
const n = String(f.name || '').toLowerCase()
|
||
let kind = 'other'
|
||
if (n.endsWith('.skel')) kind = 'skel'
|
||
else if (n.endsWith('.json')) kind = 'json'
|
||
else if (n.endsWith('.atlas')) kind = 'atlas'
|
||
else if (IMAGE_RE.test(n)) kind = 'img'
|
||
return { id: index, name: f.name, kind: kind }
|
||
}),
|
||
pickedCount: picked.length,
|
||
missingText: missing.length ? '还缺少：' + missing.join(' ') : '',
|
||
})
|
||
|
||
// 面板高度变化会改变画布显示区域，需重新同步画布尺寸
|
||
setTimeout(() => this.syncCanvasSize(), 80)
|
||
|
||
// 三件套齐全才自动加载；否则提示还缺什么
|
||
// （PC/模拟器端一次只能选一个文件，可分多次继续选）
|
||
if (!missing.length) {
|
||
this.loadFromFiles(picked)
|
||
} else {
|
||
wx.showToast({
|
||
title: '已添加，还缺 ' + missing.join(' ') + '，可再次选择',
|
||
icon: 'none',
|
||
duration: 2500,
|
||
})
|
||
}
|
||
},
|
||
|
||
clearFiles() {
|
||
this.stopLoop()
|
||
this._ready = false
|
||
this._picked = []
|
||
this.setData({
|
||
pickedText: '',
|
||
pickedFiles: [],
|
||
pickedCount: 0,
|
||
missingText: '',
|
||
animations: [],
|
||
info: '',
|
||
status: 'idle',
|
||
errorMsg: '',
|
||
})
|
||
// 面板收起后画布显示区会变高，重新同步尺寸
|
||
setTimeout(() => this.syncCanvasSize(), 80)
|
||
},
|
||
|
||
async loadFromFiles(files) {
|
||
if (!this._gl) {
|
||
this.setData({ status: 'error', errorMsg: '画布尚未就绪，请稍后重试' })
|
||
return
|
||
}
|
||
if (!files || !files.length) {
|
||
this.setData({ status: 'error', errorMsg: '没有选中任何文件' })
|
||
return
|
||
}
|
||
|
||
const has = this.classify(files)
|
||
const skelFile = has.skel
|
||
const jsonFile = has.json
|
||
const atlasFile = has.atlas
|
||
const imageFiles = has.images
|
||
|
||
if (!atlasFile) {
|
||
this.setData({ status: 'error', errorMsg: '缺少 .atlas 图集文件' })
|
||
return
|
||
}
|
||
if (!skelFile && !jsonFile) {
|
||
this.setData({ status: 'error', errorMsg: '缺少 .skel 骨骼文件（也支持 .json）' })
|
||
return
|
||
}
|
||
if (!imageFiles.length) {
|
||
this.setData({ status: 'error', errorMsg: '缺少 .png 贴图文件' })
|
||
return
|
||
}
|
||
|
||
this.setData({ status: 'loading', statusText: '读取文件中…' })
|
||
|
||
try {
|
||
const fs = wx.getFileSystemManager()
|
||
const atlasText = fs.readFileSync(atlasFile.path, 'utf8')
|
||
const skelBuffer = skelFile ? fs.readFileSync(skelFile.path) : null
|
||
const jsonText = jsonFile ? fs.readFileSync(jsonFile.path, 'utf8') : null
|
||
|
||
this.setData({ statusText: '加载贴图…' })
|
||
const images = []
|
||
for (let i = 0; i < imageFiles.length; i++) {
|
||
images.push(await this.loadImage(imageFiles[i]))
|
||
}
|
||
|
||
this.setData({ statusText: '解析骨骼数据…' })
|
||
const atlas = new core.TextureAtlas(atlasText)
|
||
|
||
// 把贴图绑定到图集页（按文件名匹配，匹配不到则用第一张）
|
||
atlas.pages.forEach((page) => {
|
||
const pageName = env.baseName(page.name)
|
||
const match =
|
||
images.find((im) => env.baseName(im.name) === pageName) || images[0]
|
||
const tex = new webgl.GLTexture(this._managed, match.img)
|
||
tex.setFilters(page.minFilter, page.magFilter)
|
||
page.setTexture(tex)
|
||
})
|
||
|
||
const loader = new core.AtlasAttachmentLoader(atlas)
|
||
let skeletonData
|
||
if (skelBuffer) {
|
||
const bin = new core.SkeletonBinary(loader)
|
||
bin.scale = 1
|
||
skeletonData = bin.readSkeletonData(new Uint8Array(skelBuffer))
|
||
} else {
|
||
const sj = new core.SkeletonJson(loader)
|
||
skeletonData = sj.readSkeletonData(JSON.parse(jsonText))
|
||
}
|
||
|
||
const skeleton = new core.Skeleton(skeletonData)
|
||
const stateData = new core.AnimationStateData(skeletonData)
|
||
const state = new core.AnimationState(stateData)
|
||
|
||
const animations = skeletonData.animations.map((a) => a.name)
|
||
if (!animations.length) {
|
||
this.setData({ status: 'error', errorMsg: '该骨骼文件里没有可播放的内容' })
|
||
return
|
||
}
|
||
|
||
this._skeletonData = skeletonData
|
||
this._skeleton = skeleton
|
||
this._state = state
|
||
this._pma = atlas.pages.length ? !!atlas.pages[0].pma : false
|
||
this._renderer.premultipliedAlpha = this._pma
|
||
|
||
// 用 setup pose 计算一次包围盒，用于自动适配画布
|
||
skeleton.setToSetupPose()
|
||
skeleton.updateWorldTransform(core.Physics.update)
|
||
const offset = new core.Vector2()
|
||
const size = new core.Vector2()
|
||
skeleton.getBounds(offset, size)
|
||
this._fitOffset = { x: offset.x, y: offset.y }
|
||
this._fitSize = { x: size.x, y: size.y }
|
||
|
||
this._baseScale = this.computeFitScale()
|
||
this._viewScale = 1
|
||
this.centerView()
|
||
|
||
state.setAnimation(0, animations[0], this.data.loop)
|
||
|
||
this._ready = true
|
||
this.setData({
|
||
status: 'ready',
|
||
animations,
|
||
animIndex: 0,
|
||
playing: true,
|
||
scalePercent: 100,
|
||
info:
|
||
'Spine ' +
|
||
skeletonData.version +
|
||
' · ' +
|
||
skeletonData.bones.length +
|
||
'骨骼 / ' +
|
||
skeletonData.slots.length +
|
||
'插槽 · ' +
|
||
animations.length +
|
||
'段画面 · ' +
|
||
atlas.pages.length +
|
||
'图集页 · 文件声明PMA ' +
|
||
(this._pma ? '是' : '否'),
|
||
})
|
||
// 播放控件出现会改变画布显示区域，重新同步尺寸以保证比例正确
|
||
setTimeout(() => this.syncCanvasSize(), 80)
|
||
this.startLoop()
|
||
} catch (e) {
|
||
this.setData({
|
||
status: 'error',
|
||
errorMsg: '加载失败：' + ((e && e.message) || String(e)),
|
||
})
|
||
}
|
||
},
|
||
|
||
loadImage(file) {
|
||
return new Promise((resolve, reject) => {
|
||
if (!this._canvas || typeof this._canvas.createImage !== 'function') {
|
||
reject(new Error('当前 canvas 不支持 createImage'))
|
||
return
|
||
}
|
||
const img = this._canvas.createImage()
|
||
img.onload = () => resolve({ name: file.name, img: img })
|
||
img.onerror = () => reject(new Error('贴图加载失败：' + file.name))
|
||
img.src = file.path
|
||
})
|
||
},
|
||
|
||
// ---------------- 视图计算 ----------------
|
||
computeFitScale() {
|
||
const W = this._canvas.width
|
||
const H = this._canvas.height
|
||
const sx = Math.max(this._fitSize.x, 1)
|
||
const sy = Math.max(this._fitSize.y, 1)
|
||
return Math.min((W * 0.9) / sx, (H * 0.9) / sy)
|
||
},
|
||
|
||
centerView() {
|
||
const W = this._canvas.width
|
||
const H = this._canvas.height
|
||
this._tx = W / 2 - (this._fitOffset.x + this._fitSize.x / 2) * this._baseScale
|
||
this._ty = H / 2 - (this._fitOffset.y + this._fitSize.y / 2) * this._baseScale
|
||
},
|
||
|
||
// ---------------- 渲染循环 ----------------
|
||
startLoop() {
|
||
if (this._raf) return
|
||
this._lastTime = Date.now()
|
||
const step = () => {
|
||
this._raf = null
|
||
if (!this._ready) return
|
||
this.renderFrame()
|
||
const canvas = this._canvas
|
||
if (canvas && typeof canvas.requestAnimationFrame === 'function') {
|
||
this._raf = canvas.requestAnimationFrame(step)
|
||
} else {
|
||
this._raf = setTimeout(step, 16)
|
||
}
|
||
}
|
||
step()
|
||
},
|
||
|
||
stopLoop() {
|
||
if (!this._raf) return
|
||
const canvas = this._canvas
|
||
if (canvas && typeof canvas.cancelAnimationFrame === 'function') {
|
||
canvas.cancelAnimationFrame(this._raf)
|
||
} else {
|
||
clearTimeout(this._raf)
|
||
}
|
||
this._raf = null
|
||
},
|
||
|
||
renderFrame() {
|
||
const canvas = this._canvas
|
||
const gl = this._gl
|
||
if (!canvas || !gl || !this._skeleton) return
|
||
|
||
const now = Date.now()
|
||
|
||
// 面板内容变化（比如加载后多出播放/参数区）会改变画布显示尺寸。
|
||
// 只在加载后校对一次是不够的：那次可能跑在布局生效之前，之后就再也不会纠正，
|
||
// 缓冲区与显示区比例不一致就会让画面被拉伸。这里定期校对，尺寸没变时直接返回，开销很小。
|
||
if (now - this._lastSizeCheck > 400) {
|
||
this._lastSizeCheck = now
|
||
this.syncCanvasSize()
|
||
}
|
||
|
||
let dt = (now - this._lastTime) / 1000
|
||
this._lastTime = now
|
||
if (!(dt > 0)) dt = 0
|
||
if (dt > 0.1) dt = 0.1
|
||
|
||
if (this.data.playing) {
|
||
this._state.update(dt * this.data.speed)
|
||
this._state.apply(this._skeleton)
|
||
}
|
||
this._skeleton.updateWorldTransform(core.Physics.update)
|
||
|
||
const W = canvas.width
|
||
const H = canvas.height
|
||
const scale = this._baseScale * this._viewScale
|
||
const mvp = env.buildMVP(scale, this._tx, this._ty, W, H)
|
||
|
||
gl.viewport(0, 0, W, H)
|
||
// 透明清屏：canvas 是原生组件、层级在 WebView 之上，
|
||
// 用不透明颜色清屏会盖住压在它上面的浮层（缩放按钮、手势提示、信息徽标）。
|
||
// 背景交给舞台的 CSS 渐变，观感一致，但浮层能正常显示。
|
||
gl.clearColor(0, 0, 0, 0)
|
||
gl.clear(gl.COLOR_BUFFER_BIT)
|
||
// 预乘开关：同时影响渲染器的混色方式与 GL 混合函数
|
||
const pma = this.data.premultiplied
|
||
this._renderer.premultipliedAlpha = pma
|
||
gl.enable(gl.BLEND)
|
||
gl.disable(gl.DEPTH_TEST)
|
||
if (pma) {
|
||
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA)
|
||
} else {
|
||
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA)
|
||
}
|
||
|
||
const shader = this._shader
|
||
shader.bind()
|
||
shader.setUniformi(webgl.Shader.SAMPLER, 0)
|
||
shader.setUniform4x4f(webgl.Shader.MVP_MATRIX, mvp)
|
||
|
||
const batcher = this._batcher
|
||
batcher.begin(shader)
|
||
this._renderer.draw(batcher, this._skeleton)
|
||
batcher.end()
|
||
shader.unbind()
|
||
},
|
||
|
||
// ---------------- 交互控制 ----------------
|
||
onAnimChange(e) {
|
||
const idx = Number(e.detail.value)
|
||
const name = this.data.animations[idx]
|
||
this.setData({ animIndex: idx })
|
||
if (this._state && name) {
|
||
this._state.setAnimation(0, name, this.data.loop)
|
||
}
|
||
},
|
||
|
||
togglePlay() {
|
||
this.setData({ playing: !this.data.playing })
|
||
},
|
||
|
||
toggleLoop() {
|
||
const loop = !this.data.loop
|
||
this.setData({ loop })
|
||
const name = this.data.animations[this.data.animIndex]
|
||
if (this._state && name) {
|
||
this._state.setAnimation(0, name, loop)
|
||
}
|
||
},
|
||
|
||
togglePremultiplied() {
|
||
this.setData({ premultiplied: !this.data.premultiplied })
|
||
},
|
||
|
||
onSpeedChange(e) {
|
||
this.setData({ speed: Number(e.detail.value) })
|
||
},
|
||
|
||
zoomIn() {
|
||
this.zoomBy(1.25)
|
||
},
|
||
|
||
zoomOut() {
|
||
this.zoomBy(0.8)
|
||
},
|
||
|
||
zoomBy(factor) {
|
||
const prev = this._viewScale
|
||
const next = this.clampScale(prev * factor)
|
||
if (next === prev) return
|
||
// 以画布中心为锚点缩放
|
||
const W = this._canvas ? this._canvas.width : 0
|
||
const H = this._canvas ? this._canvas.height : 0
|
||
this.applyZoomAnchor(next / prev, W / 2, H / 2)
|
||
this._viewScale = next
|
||
this.updateScalePercent()
|
||
},
|
||
|
||
resetView() {
|
||
if (!this._fitOffset) return
|
||
this._viewScale = 1
|
||
this.centerView()
|
||
this.setData({ scalePercent: 100 })
|
||
},
|
||
|
||
distance(a, b) {
|
||
const dx = b.x - a.x
|
||
const dy = b.y - a.y
|
||
return Math.sqrt(dx * dx + dy * dy)
|
||
},
|
||
|
||
clampScale(v) {
|
||
return Math.min(8, Math.max(0.1, v))
|
||
},
|
||
|
||
// 以画布像素点 (X, Y) 为锚点缩放：该点下的世界坐标保持不动
|
||
applyZoomAnchor(k, X, Y) {
|
||
this._tx = X * (1 - k) + k * this._tx
|
||
this._ty = Y * (1 - k) + k * this._ty
|
||
},
|
||
|
||
updateScalePercent() {
|
||
const pct = Math.round(this._viewScale * 100)
|
||
if (pct !== this.data.scalePercent) {
|
||
this.setData({ scalePercent: pct })
|
||
}
|
||
},
|
||
|
||
onTouchStart(e) {
|
||
const ts = e.touches || []
|
||
if (ts.length >= 2) {
|
||
// 进入双指缩放：记录初始指距与当时的缩放值
|
||
this._touch = null
|
||
this._pinch = {
|
||
dist0: this.distance(ts[0], ts[1]),
|
||
scale0: this._viewScale,
|
||
}
|
||
return
|
||
}
|
||
if (ts.length === 1) {
|
||
this._pinch = null
|
||
this._touch = { x: ts[0].x, y: ts[0].y }
|
||
}
|
||
},
|
||
|
||
onTouchMove(e) {
|
||
const ts = e.touches || []
|
||
|
||
// 双指捏合缩放
|
||
if (ts.length >= 2) {
|
||
if (!this._pinch || !this._pinch.dist0) return
|
||
const dist = this.distance(ts[0], ts[1])
|
||
if (dist <= 0) return
|
||
|
||
const prev = this._viewScale
|
||
const next = this.clampScale(this._pinch.scale0 * (dist / this._pinch.dist0))
|
||
if (next === prev) return
|
||
|
||
// 以双指中点（画布像素坐标）为锚点缩放
|
||
const H = this._canvas ? this._canvas.height : 0
|
||
const mx = (ts[0].x + ts[1].x) / 2
|
||
const my = (ts[0].y + ts[1].y) / 2
|
||
const X = mx * this._dpr
|
||
const Y = H - my * this._dpr
|
||
this.applyZoomAnchor(next / prev, X, Y)
|
||
this._viewScale = next
|
||
this.updateScalePercent()
|
||
return
|
||
}
|
||
|
||
// 单指平移
|
||
if (!this._touch || ts.length !== 1) return
|
||
const t = ts[0]
|
||
const dx = t.x - this._touch.x
|
||
const dy = t.y - this._touch.y
|
||
this._touch = { x: t.x, y: t.y }
|
||
// 屏幕 y 向下，画布 y 向上，所以 dy 取反
|
||
this._tx += dx * this._dpr
|
||
this._ty -= dy * this._dpr
|
||
},
|
||
|
||
onTouchEnd(e) {
|
||
const ts = (e && e.touches) || []
|
||
if (ts.length < 2) this._pinch = null
|
||
if (ts.length === 0) {
|
||
this._touch = null
|
||
} else if (ts.length === 1) {
|
||
// 从双指变为单指时，重置平移基准，避免画面跳变
|
||
this._touch = { x: ts[0].x, y: ts[0].y }
|
||
}
|
||
},
|
||
})
|