Raphael中线/路径上的位置鼠标指针

Question

在此jsFiddle中，我有一个带有线/路径的Raphael画布，用户可以在其中拖动它。

问题是，鼠标指针的确切顶部像素必须在线上才能拖动它。我需要拉斐尔更加“原谅”，并让用户拖动线条（如果它触摸到指针的顶部，例如3像素）。

我添加了mouseover/mouseout事件以实际上告诉鼠标何时在直线上，否则很难知道。

所以问题是：有没有一种方法可以拖动线条而不必精确定位鼠标指针？

var paper = Raphael("canvas", 600, 600); 
var line = this.paper.path('M10 10 L50 50');

var start = function () {
      this.odx = 0;
      this.ody = 0;
},
move = function (dx, dy) {
      this.translate(dx - this.odx, dy - this.ody);
      this.odx = dx;
      this.ody = dy;
},
up = function () {};

line.drag(move, start, up);

line.mouseover(function(e) {
    line.attr('stroke', 'red');
});

line.mouseout(function(e) {
  line.attr('stroke', 'black');
});

Answer 1

Raphael库出于绘图目的创建了SVG元素（而不是CANVAS元素），而绘图线在SVG元素内创建了PATH元素。

我通过增加悬停线的宽度获得了一些成功。您必须通过至少将鼠标移到该线上来触发宽度更改，但是之后选择起来要容易得多。尽管所产生的视觉效果可能并不完美（可能会发生一些宽度滑动），但继续进行拖动操作不会出现问题。

您可以通过在stroke-width和mouseover处理程序中修改mouseout属性来尝试增加线宽：

line.mouseover(function(e) {
    line.attr('stroke', 'red');
    line.attr('stroke-width', '9')
});

line.mouseout(function(e) {
  line.attr('stroke', 'black');
  line.attr('stroke-width', '1')
});

或通过使用[]悬停在CSS中的所有路径元素上时修改stroke-width样式

path:hover {
   stroke-width: 9;
}

---

根据this question，Raphael没有提供所有可能的CSS样式的抽象，因此它可以在XML文档中使用VML。如果您可以在没有IE 9支持的情况下生活并且希望用户使用现代浏览器，则您可能会对以下代码段感兴趣

• 通过设置设置mouseover光标的类名称draggable来增加move上的行的宽度，
• [开始移动时，将draggable替换为dragging（这消除了宽度增加），并在svg容器上设置了move光标，
• 删除draggable上的类别dragging，但不删除mouseout
• 清理类和up函数中的光标。

"use strict";
var container = document.getElementById("canvas");
var paper = Raphael("canvas", 600, 600);
var line = this.paper.path('M10 10 L50 50');
var start = function () {
   this.odx = 0;
   this.ody = 0;
},
move = function (dx, dy) {
    this.translate(dx - this.odx, dy - this.ody);
    this.odx = dx;
    this.ody = dy;
    if( this.node.classList.contains("draggable")) {
        this.node.classList.replace("draggable", "dragging");
        container.classList.add("moveCursor");
    }
}, 
up = function (e) {
    line.node.classList.remove("draggable", "dragging");
    container.classList.remove("moveCursor");
};

line.drag(move, start, up);
line.mouseover(function(e) {
    if(!e.target.classList.contains("dragging")) {
        e.target.setAttribute("class", "draggable");
    }
});

.draggable:hover {
    stroke-width: 9;
    stroke:red;
    cursor: move;
} 
path.dragging {
    stroke: red;
}
.moveCursor{
    cursor:move;
}
svg {
   border: thin solid blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>

<!-- body-html -->
<div id="canvas"></div>

该代码基本上是用于演示-如果将线拖动到SVG元素外部，则看不到它或抓住它将其拖动回去。

某些CSS规则（例如path.dragging）需要更多的特殊性，才能优先于Raphael提供的默认设置。