Question

我使用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;
}

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

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

当鼠标按钮被释放时，我删除了行

我的问题：

有没有办法让我的点周围的可点击区域更大，对用户来说是一种看不见的方式，而不会调整点数？

由于

Answer 1

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

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

raphaeljs对象的可点击区域更大

1 个答案: