不规则图片按钮，如何判断点击事件

Creator 2.x
#1

不规则图片按钮，如何判断点击事件

#2

一,可以区分图片像素,如果是像素值是(0,0,0)就证明是透明 消耗比较大
二,用碰撞编辑器编辑图片大小的区域,这样消耗小,不过如果图片比较多 很麻烦

应该也还有别的解决方法,不过我比较菜 别的方法还没实现过

#3

如何判断像素值是(0,0,0)呢？

#4

touchStart(event: EventTouch) {

    let location = event.getUILocation();

    let transform = this.node.getComponent(UITransform);

    let touch = transform.convertToNodeSpaceAR(v3(location.x, location.y, 0));

    let pos = Utils.changeNodeARPos(touch.x, touch.y, 0.5, 0.5, 0, 1, transform.contentSize.width, transform.contentSize.height);

    let texture = this.node.getComponent(Sprite).spriteFrame.texture;

    let img = new Image();

    img.src = (<any>texture).image.nativeUrl;

    img.onload = () => {

        let c = document.createElement('canvas');

        c.width = img.width;

        c.height = img.height;

        let ctx = c.getContext('2d');

        ctx.drawImage(img, 0, 0, img.width, img.height);

        let imagedata = ctx.getImageData(Math.floor(pos[0]), -Math.floor(pos[1]), 1, 1);

        if (imagedata.data[3] > 0) {

            this.node.emit('click');

            EventHandler.emitEvents(this.clickEvent);

        }

    }

}
3赞
#5

多边形碰撞组件 Intersection · Cocos Creator

image
image1858×1009 51.1 KB

1赞
#6

这个要怎么用，这个是碰撞检测~

#7

我记得图片好像可以自动去除透明区域吧？(sprite有个属性，具体叫啥我忘记了，你自己找找)然后对图片设置监听试试

#8

你是说trim吗，好像不是这个

#9

我不太确定哦，一般都有中文辅助的，叫啥我真记不起来了

#10

先编辑好按钮的多边形区域

touchend(e: cc.Touch) {
        let point = this.btn.convertToNodeSpaceAR(e.getLocation());
        if(cc.Intersection.pointInPolygon(point, /**按钮多边形数据*/)) {
            // dosomething
        }
    }
1赞
#11

按钮多边形数据是什么，这个多边形按钮其实是个矩形，有带透明区域

#12

多边形碰撞组件没有用过吗？image

1赞
#13

之前都是用来做碰撞检测的，没想到可以这么用，谢谢，一会儿试一下

#14

QQ图片20211008165754
QQ图片202110081657541415×808 49 KB

想通过Button回调函数来获取触摸位置能做到吗

#15

image
image919×242 14.7 KB

#16 
const { ccclass, menu, requireComponent } = cc._decorator;
@ccclass
@menu('自定义组件/PolygonButton')
@requireComponent(cc.PolygonCollider)
export default class PolygonButton extends cc.Component {
    onLoad() {
        const polygonHitTest = function (point, listener) {
            const polygonCollider = this.getComponent(cc.PolygonCollider);
            if (polygonCollider) {
                point = this.convertToNodeSpace(point);
                point.x -= this.getContentSize().width / 2;
                point.y -= this.getContentSize().height / 2;
                return cc.Intersection.pointInPolygon(point, polygonCollider.points);
            } else {
                return this._oldHitTest(point, listener);
            }
        }
        this.node['_oldHitTest'] = this.node['_hitTest'].bind(this.node);
        this.node['_hitTest'] = polygonHitTest.bind(this.node);
    }
}

以前在论坛里找到的
2.x 可以用 挂在有按钮的组件上 编辑一下多边形 就可以了

3赞
#17

1111113 这样子有个问题，图片会被透明区域挡住

#18

代码看的不是很懂，可以具体点吗

#19

如果你截图的意思是需要判断点击的是哪个格子的话 那没必要考虑不规则问题 只需要判断点击位置距离最近的格子就行了

#20

如果相邻格子的空白线是和 AB 两中心点的中垂线是同一条线的话,距离判断是没问题,如果不是,用距离来做判断就差了一点点