Question

1-我有很多由raphael js绘制的文本元素，并添加了拖放功能。他们（整个raphael纸）的可能性下降，大多数被拖得很完美，但有一些文字元素向错误的方向移动我不知道为什么？

在这个jsfiddle中我只绘制了3个文本元素的例子，我注意到在错误方向上移动的文本元素在矩阵中的“-1”就像这样的“0 0.9407 -1 0 473.4541 293.4927”，这些值矩阵由Illustrator提供（将ai导出到svg）

http://jsfiddle.net/xperali/g6Xav/

2-我也希望无法选择文本元素，我尝试使用event.preventDefault();取消鼠标事件，如'onmouseover'和'onmouseout'和'onclick'，但没有成功

我用谷歌搜索了这个问题，我没有找到任何建议，有什么建议吗？

解决方案： 最后，我使用了raphael-pan-zoom plugin来启用平移和缩放功能，它运行正常！

Answer 1

raphael问题似乎比你的第二个问题更具挑战性，这是我要解决的问题。您可以使用一点css和一个属性（对于IE10和Opera）使这些不可选。

text { /* Use a more applicable selector here - text is potentially too generic */
   -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: -moz-none;
    user-select: none;
    /*cursor:pointer;*/
}

Fiddle

这解决了大部分问题，但是对于Opera和IE10，你需要能够在元素上设置其他属性，即unselectable =“on”。如果在元素声明中找不到相关方法，可以通过javascript设置。

我确实通过使用奇数的m：值进行定向工作，将其从m:'0.9407 0 0 1 473.4541 293.4927'更改为m:'0 0.9407 -1 0 473.4541 293.4927'。

然而，我意识到你有一个垂直标签是有原因的，这是我无法工作的部分。只要使标签垂直，它就会翻转拖动的方向轴。这是因为你有效地旋转了形状本身，它似乎在被拖动时保留了它自己的方向感。

如果您有兴趣，here是一个小提琴，我将标签旋转回到它的正常方向，它就像其他标签一样。

Answer 2

最后，我使用了raphael-pan-zoom plugin来启用平移和缩放功能，它运行正常！感谢JonVD的答案，但我有很多文本元素都有这个问题，我不能每次都随机更改m值。

非常感谢您的努力，无论如何，您解决了第二个问题

raphael js：文本元素拖动;落在错误的方向

2 个答案: