DataType
/
omi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

cax-svg - fix group event binding && fix nest element

This commit is contained in:
dntzhang 2019-04-10 16:45:54 +08:00
parent a403768cac
commit f36adcb1a3
7 changed files with 106 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/cax-svg/cax/render/display/we-stage.js
View File

@ -116,9 +116,9 @@ class WeStage extends Group {
}
_getObjectUnderPoint (evt, cb) {
const list = this.renderer.getHitRenderList(this)
//const list = this.renderer.getHitRenderList(this)
if (this.hitAABB) {
return this._hitRender.hitAABB(list, evt, cb)
return this._hitRender.hitAABB(this, evt, cb)
} else {
this._hitRender.clear()
this._hitRender.hit(list, evt, cb, list.length - 1)

67
packages/cax-svg/cax/render/render/wx-hit-render.js
View File

@ -5,6 +5,7 @@ import Event from '../base/event.js'
import Sprite from '../display/sprite.js'
import Bitmap from '../display/bitmap.js'
import Text from '../display/text.js'
import Group from '../display/group'
class WxHitRender extends Render {
constructor (ctx, component, canvasId) {
@ -22,17 +23,67 @@ class WxHitRender extends Render {
this.ctx.clearRect(0, 0, 2, 2)
}
hitAABB (list, evt, cb) {
const len = list.length
for (let i = len - 1; i >= 0; i--) {
let o = list[i]
// hitAABB (list, evt, cb) {
// const len = list.length
// for (let i = len - 1; i >= 0; i--) {
// let o = list[i]
if (o.AABB && this.checkPointInAABB(evt.stageX, evt.stageY, o.AABB)) {
this._dispatchEvent(o, evt)
cb(o)
return o
// if (o.AABB && this.checkPointInAABB(evt.stageX, evt.stageY, o.AABB)) {
// this._dispatchEvent(o, evt)
// cb(o)
// return o
// }
// }
// }
hitAABB (o, evt) {
let list = o.children.slice(0),
l = list.length
for (let i = l - 1; i >= 0; i--) {
let child = list[i]
// if (!this.isbindingEvent(child)) continue;
let path = this._hitAABB(child, evt, [], true)
if (path.length > 0) {
let target = path[path.length - 1]
this._dispatchEvent(target, evt)
return target
}
}
}
_hitAABB (o, evt, path, rootCall) {
if (o.ignoreHit || !o.isVisible()) {
return
}
o.initAABB()
if (o.AABB && this.checkPointInAABB(evt.stageX, evt.stageY, o.AABB)) {
// this._bubbleEvent(o, type, evt);
o.___$push = true
path.push(o)
//return o
}
if (o instanceof Group) {
let list = o.children.slice(0),
l = list.length
for (let i = l - 1; i >= 0; i--) {
let child = list[i]
this._hitAABB(child, evt, path)
if(child.___$push){
delete child.___$push
//同级只找一个就好了，所有 break
break
}
//if (target) return target
}
}
if(rootCall){
return path
}
}
checkPointInAABB (x, y, AABB) {

23
packages/cax-svg/cax/svg/group.js Normal file
View File

@ -0,0 +1,23 @@
import Group from '../render/display/group'
import { transform } from './parse-transform'
import { parseEvent } from './parse-event'
export function group(props) {
const options = Object.assign({
width: 0,
height: 0,
x: 0,
y: 0
}, props)
const obj = new Group()
obj.x = Number(options.x)
obj.y = Number(options.y)
transform(props, obj)
parseEvent(props, obj)
return obj
}

34
packages/cax-svg/cax/svg/index.js
View File

@ -6,6 +6,7 @@ import { line } from './line'
import { polyline } from './polyline'
import { polygon } from './polygon'
import { path } from './path'
import { group } from './group'
class SVG extends Group {
constructor(vdom) {
@ -32,45 +33,42 @@ class SVG extends Group {
generate(parent, vdomChild) {
switch (vdomChild.type) {
case 'rect':
parent.add(rect(vdomChild.props))
break;
break
case 'circle':
parent.add(circle(vdomChild.props))
break;
break
case 'ellipse':
parent.add(ellipse(vdomChild.props))
break
break;
case 'line':
parent.add(line(vdomChild.props))
break;
break
case 'polyline':
parent.add(polyline(vdomChild.props))
break;
break
case 'polygon':
parent.add(polygon(vdomChild.props))
break
break;
case 'path':
case 'path':
parent.add(path(vdomChild.props))
break
break;
case 'g':
const p = group(vdomChild.props)
parent.add(p)
vdomChild.children.forEach(child => {
this.generate(p, child)
})
break
}
}
}
export default SVG

2
packages/cax-svg/cax/svg/parse-event.js
View File

@ -1,4 +1,6 @@
export function parseEvent(props, obj) {
if(!props) return
const tapHandler = props.bindtap || props.bindTap || props.onTap || props.ontap || props.onclick || props.onClick || props.bindclick || props.bindClick
if (tapHandler) {

2
packages/cax-svg/cax/svg/parse-transform.js
View File

@ -18,7 +18,7 @@ function parse(a) {
}
export function transform(props, target){
if(!props) return
if (props.transform) {
const obj = parse(props.transform)

3
packages/cax-svg/pages/path/index.js
View File

@ -9,7 +9,10 @@ Page({
const heart = new SVG(html`
<svg>
<g x="-100" y='-100'>
<path onclick=${this.tapHandler} width="100" height="100" d="M923 283.6a260.04 260.04 0 0 0-56.9-82.8 264.4 264.4 0 0 0-84-55.5A265.34 265.34 0 0 0 679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 0 0-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9zM512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5 0 201.2-356 429.3-356 429.3z" style="stroke:#ff0000; fill: #ff0000"/>
</g>
<!-- <rect x="10" y="10" onclick=${this.tapHandler} height="100" width="100"
style="stroke:#ff0000; fill: #0000ff"/>