javascript - raphaeljs 对象的可点击区域更大

Question

我使用 emberjs 和 raphaeljs 制作了一个绘图工具，最近开始支持触摸屏。该应用程序允许用户用线连接点。

我的问题:

我的点对于触摸屏来说太小了，我不想调整它们的大小，因为我喜欢它的美感...我还禁用了用户缩放，这样用户就无法通过捏合来使点变大，因此 Web 应用程序感觉更像是 native 应用程序...

这是我的事件处理程序代码:

startpoints.mousedown(this.startCurve);

这是我的 startCurve 函数:

startCurve: function (evt, x, y){

    var me = this.data('view');
    me.set('dragStartedPoint', this);

    if(evt.target === undefined) {
        //IE
        x = evt.srcElement.offsetLeft + 10;
        y = evt.srcElement.offsetTop + 10;
    } else {
        x = evt.target.cx.baseVal.value;
        y = evt.target.cy.baseVal.value;
    }

    me.set('mouseStartX', x);
    me.set('mouseStartY', y);
    me.set('mouseStopX', x);
    me.set('mouseStopY', y);

    currentCurve = me.curve(me.makePath(x,y,x,y));
    if(this.data('type') == 'answer'){
        currentCurve.data('answer', this.data('answer'));
    } else {
        currentCurve.data('subQuestion', this.data('subQuestion'));
    }
    me.set('isDragging', true);
    me.set('currentCurve', currentCurve);

    evt.preventDefault();
    return false;
}

在此之后，只要按住鼠标按钮，我就会继续画一条线

当在我的一组端点中的一个点上释放鼠标按钮时，线保持在原位

当鼠标按钮在其他任何东西上释放时，我会删除该行

我的问题:

有没有办法让我在不调整点大小的情况下以用户不可见的方式使点周围的可点击区域更大？

谢谢

Answer 1

在每个真实点的顶部绘制第二个透明点，并将 mousedown 事件处理程序附加到透明点。您可能需要调整 pointer-events属性以确保透明点获取鼠标事件。

有多种方法可以绘制透明点，例如fill="none"或 fill-opacity="0"。