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

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

我的问题：

我的点对于触摸屏来说太小了，我不想调整它们的大小，因为我喜欢美观……我还禁用了用户缩放功能，以便用户无法捏住点来增大点，因此Web应用程序更像本机应用程序...

这是事件处理程序的代码：

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;
}

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

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

当在其他任何地方释放鼠标按钮时，我删除了该行

我的问题：

有没有一种方法可以使我的点周围的可点击区域变大，而用户却看不见，而无需调整点的大小？

谢谢

最佳答案

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

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

关于javascript - raphaeljs对象的可点击区域更大，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20905259/