|
|
@@ -401,59 +401,48 @@ export default {
|
|
|
|
|
|
// ===== 2D 效价-激活度网格 =====
|
|
|
onAffectGridTap(e) {
|
|
|
- // 获取点击相对位置
|
|
|
- var rect = e.target
|
|
|
- // 使用 touches 或 detail
|
|
|
- var x = e.detail && e.detail.x ? e.detail.x : 0
|
|
|
- var y = e.detail && e.detail.y ? e.detail.y : 0
|
|
|
-
|
|
|
- // fallback: 从 pageX/pageY 计算（推荐）
|
|
|
- if (e.detail && e.detail.x !== undefined) {
|
|
|
- // uni-app 在 @tap 事件中 detail 有 x/y 表示相对于目标元素的偏移
|
|
|
- x = e.detail.x
|
|
|
- y = e.detail.y
|
|
|
- }
|
|
|
+ // 从触点获取页面坐标（clientX/clientY，px）
|
|
|
+ var touch = (e.touches && e.touches[0]) || (e.changedTouches && e.changedTouches[0]) || e.detail
|
|
|
+ var clientX = touch ? (touch.clientX !== undefined ? touch.clientX : touch.x) : 0
|
|
|
+ var clientY = touch ? (touch.clientY !== undefined ? touch.clientY : touch.y) : 0
|
|
|
|
|
|
- // px → rpx 转换
|
|
|
- var sysInfo = uni.getWindowInfo()
|
|
|
- var scale = 750 / sysInfo.windowWidth
|
|
|
-
|
|
|
- // 直接使用事件中的偏移（px），然后转 rpx
|
|
|
- // 注意: 如果 e.detail 没有 x/y，尝试从 e.touches 获取
|
|
|
- if ((x === 0 && y === 0) || !e.detail.x) {
|
|
|
- var touch = e.touches ? e.touches[0] : null
|
|
|
- if (touch) {
|
|
|
- // 需要根据 grid 的位置计算相对偏移
|
|
|
- x = touch.x || 0
|
|
|
- y = touch.y || 0
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 直接用 rpx 计算，简化版：click 的位置相对 grid 容器
|
|
|
- // uni-app 的 @tap 的 detail = {x, y} 是相对于被点击元素的 px 值
|
|
|
- var pxX = e.detail.x || 0
|
|
|
- var pxY = e.detail.y || 0
|
|
|
- var rpxX = pxX * scale
|
|
|
- var rpxY = pxY * scale
|
|
|
-
|
|
|
- // 约束在有效范围内
|
|
|
- var margin = 20
|
|
|
- var maxRpx = this.gridWidth - margin
|
|
|
- if (rpxX < margin) rpxX = margin
|
|
|
- if (rpxX > maxRpx) rpxX = maxRpx
|
|
|
- if (rpxY < margin) rpxY = margin
|
|
|
- if (rpxY > this.gridHeight - margin) rpxY = this.gridHeight - margin
|
|
|
-
|
|
|
- // 映射到 1-10
|
|
|
- var usable = this.gridWidth - 2 * margin
|
|
|
- var val = Math.round(1 + ((rpxX - margin) / usable) * 9)
|
|
|
- var aro = Math.round(10 - ((rpxY - margin) / usable) * 9)
|
|
|
-
|
|
|
- this.affectValence = Math.max(1, Math.min(10, val))
|
|
|
- this.affectArousal = Math.max(1, Math.min(10, aro))
|
|
|
-
|
|
|
- // 自动映射 moodWeather 用于向后兼容
|
|
|
- this.updateWeatherFromAffect()
|
|
|
+ var self = this
|
|
|
+ var query = uni.createSelectorQuery().in(this)
|
|
|
+ query.select('.affect-grid').boundingClientRect(function(rect) {
|
|
|
+ if (!rect) return
|
|
|
+
|
|
|
+ // 相对网格的偏移（px）
|
|
|
+ var pxX = clientX - rect.left
|
|
|
+ var pxY = clientY - rect.top
|
|
|
+ if (pxX < 0) pxX = 0
|
|
|
+ if (pxY < 0) pxY = 0
|
|
|
+ if (pxX > rect.width) pxX = rect.width
|
|
|
+ if (pxY > rect.height) pxY = rect.height
|
|
|
+
|
|
|
+ // px → rpx 转换（网格宽高单位为 rpx，通过比例换算）
|
|
|
+ var scale = self.gridWidth / rect.width
|
|
|
+ var rpxX = pxX * scale
|
|
|
+ var rpxY = pxY * scale
|
|
|
+
|
|
|
+ // 约束在有效范围内（跟 affectDotX/Y 的 margin 对齐）
|
|
|
+ var margin = 20
|
|
|
+ var maxRpx = self.gridWidth - margin
|
|
|
+ if (rpxX < margin) rpxX = margin
|
|
|
+ if (rpxX > maxRpx) rpxX = maxRpx
|
|
|
+ if (rpxY < margin) rpxY = margin
|
|
|
+ if (rpxY > self.gridHeight - margin) rpxY = self.gridHeight - margin
|
|
|
+
|
|
|
+ // 映射到 1-10
|
|
|
+ var usable = self.gridWidth - 2 * margin
|
|
|
+ var val = Math.round(1 + ((rpxX - margin) / usable) * 9)
|
|
|
+ var aro = Math.round(10 - ((rpxY - margin) / usable) * 9)
|
|
|
+
|
|
|
+ self.affectValence = Math.max(1, Math.min(10, val))
|
|
|
+ self.affectArousal = Math.max(1, Math.min(10, aro))
|
|
|
+
|
|
|
+ // 自动映射 moodWeather 用于向后兼容
|
|
|
+ self.updateWeatherFromAffect()
|
|
|
+ }).exec()
|
|
|
},
|
|
|
|
|
|
updateWeatherFromAffect() {
|
iwt