Наведите указатель мыши на линию / путь в Рафаэле - PullRequest
Новая
       45

Наведите указатель мыши на линию / путь в Рафаэле

0 голосов
/ 08 ноября 2019

В этом 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');
});

1 Ответ

1 голос
/ 08 ноября 2019

Библиотека Raphael создает элемент SVG (не элемент CANVAS) для целей рисования, а рисование линий создает элементы PATH внутри элемента SVG.

Я добился определенного успеха, увеличив ширину линии при наведении курсора. Вы должны активировать изменение ширины, по крайней мере, наведя курсор мыши на линию, но потом ее будет намного легче выбрать. Хотя визуальный эффект может быть не идеальным (может произойти некоторое колебание ширины), продолжение операции перетаскивания происходит без проблем.

Вы можете попробовать увеличить ширину линии, изменив атрибут 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')
});

или путем изменения стиля stroke-width при наведении курсора на все элементы пути в CSS с использованием 

path:hover {
   stroke-width: 9;
}

Согласно thisвопрос Рафаэль не предоставляет абстракцию всех возможных стилей CSS, поэтому он может использовать VML в документах XML. Если вы можете жить без поддержки IE 9 и ожидать, что у пользователей будет современный браузер, вас может заинтересовать следующий фрагмент, который
  • увеличивает ширину строки на mouseover, устанавливая имя класса draggable, который устанавливает курсор move,
  • при начале перемещения заменяет draggable на dragging (который устраняет увеличение ширины) и устанавливает курсор move на контейнер svg,
  • удаляет класс 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.

...