提交 aab2a2d3 编写于 作者: Q qiang

fix: 解决 canvas 组件上 touch 事件无法返回 x、y 属性的问题

上级 c5073791
...@@ -2,9 +2,7 @@ ...@@ -2,9 +2,7 @@
<uni-canvas <uni-canvas
:canvas-id="canvasId" :canvas-id="canvasId"
:disable-scroll="disableScroll" :disable-scroll="disableScroll"
v-on="$listeners" v-on="_listeners">
@touchmove="_touchmove"
>
<canvas <canvas
ref="canvas" ref="canvas"
width="300" width="300"
...@@ -28,6 +26,17 @@ function resolveColor (color) { ...@@ -28,6 +26,17 @@ function resolveColor (color) {
return 'rgba(' + color.join(',') + ')' return 'rgba(' + color.join(',') + ')'
} }
function processTouches (target, touches) {
return ([]).map.call(touches, (touche) => {
var boundingClientRect = target.getBoundingClientRect()
return {
identifier: touche.identifier,
x: touche.clientX - boundingClientRect.x,
y: touche.clientY - boundingClientRect.y
}
})
}
export default { export default {
name: 'Canvas', name: 'Canvas',
mixins: [subscriber], mixins: [subscriber],
...@@ -49,6 +58,27 @@ export default { ...@@ -49,6 +58,27 @@ export default {
computed: { computed: {
id () { id () {
return this.canvasId return this.canvasId
},
_listeners () {
var $listeners = Object.assign({}, this.$listeners)
var events = ['touchstart', 'touchmove', 'touchend']
events.forEach(event => {
var existing = $listeners[event]
var eventHandler = []
if (existing) {
eventHandler.push(($event) => {
this.$trigger(event, Object.assign({}, $event, {
touches: processTouches($event.currentTarget, $event.touches),
changedTouches: processTouches($event.currentTarget, $event.changedTouches)
}))
})
}
if (this.disableScroll && event === 'touchmove') {
eventHandler.push(this._touchmove)
}
$listeners[event] = eventHandler
})
return $listeners
} }
}, },
created () { created () {
...@@ -79,9 +109,7 @@ export default { ...@@ -79,9 +109,7 @@ export default {
} }
}, },
_touchmove (event) { _touchmove (event) {
if (this.disableScroll) { event.preventDefault()
event.preventDefault()
}
}, },
actionsChanged ({ actionsChanged ({
actions, actions,
......
...@@ -82,8 +82,9 @@ export function processEvent (name, $event = {}, detail = {}, target = {}, curre ...@@ -82,8 +82,9 @@ export function processEvent (name, $event = {}, detail = {}, target = {}, curre
detail: detail, detail: detail,
target: processTarget(target, detail), target: processTarget(target, detail),
currentTarget: processTarget(currentTarget), currentTarget: processTarget(currentTarget),
touches: processTouches($event.touches), // 只处理系统事件
changedTouches: processTouches($event.changedTouches), touches: $event instanceof Event ? processTouches($event.touches) : $event.touches,
changedTouches: $event instanceof Event ? processTouches($event.changedTouches) : $event.changedTouches,
preventDefault () { }, preventDefault () { },
stopPropagation () { } stopPropagation () { }
}) })
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册