提交 aab2a2d3 编写于 作者: Q qiang

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

上级 c5073791
......@@ -2,9 +2,7 @@
<uni-canvas
:canvas-id="canvasId"
:disable-scroll="disableScroll"
v-on="$listeners"
@touchmove="_touchmove"
>
v-on="_listeners">
<canvas
ref="canvas"
width="300"
......@@ -28,6 +26,17 @@ function resolveColor (color) {
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 {
name: 'Canvas',
mixins: [subscriber],
......@@ -49,6 +58,27 @@ export default {
computed: {
id () {
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 () {
......@@ -79,9 +109,7 @@ export default {
}
},
_touchmove (event) {
if (this.disableScroll) {
event.preventDefault()
}
event.preventDefault()
},
actionsChanged ({
actions,
......
......@@ -82,8 +82,9 @@ export function processEvent (name, $event = {}, detail = {}, target = {}, curre
detail: detail,
target: processTarget(target, detail),
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 () { },
stopPropagation () { }
})
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册