Элементы перетаскивания SVG по краям пути

У меня есть путь, как описано в прикрепленном изображении 1, и я хочу перетащить другой элемент (округленный красный) по краям рисованного пути, поэтому на end Я хочу перетащить красный отмеченный элемент на черную линию, которая является краем пути, а не внутри пути, и теперь я могу перемещаться внутри и снаружи пути, но хочу только находиться на границе путиЭлементы перетаскивания SVG по краям пути

так вот я заказной код, как показано ниже на функции mouseMove и на select случае svgedit.compiled.js

if (path_child == 'path') { 
    var line_rotate = 90; 
    if (group_w_d == "drag_drop_D") { 
     var test = 'rotate(' + line_rotate + ',' + line_pt.x + ',' + line_pt.y + ') translate(' + trans_x + ',' + line_pt.y + ') scale(' + width + ',' + height + ')'; 
    } else { 
     var test = 'rotate(' + line_rotate + ',' + line_pt.x + ',' + line_pt.y + ') translate(' + line_pt.x + ',' + line_pt.y + ') scale(' + width + ',' + height + ')'; 
    } 
    selectedElements[0].setAttribute('transform', test); 

    var cls = selectedElements[0].getAttribute('class'); 
    //alert(cls); 
    $('.' + cls).each(function() { 
     $(this).attr('transform', test) 
    }); 
}

Image one Image two

Например вот ссылка скрипки example, что я хочу именно здесь мы можем перемещать эллипс, на пути туда, куда мы хотим, но я хочу, чтобы это было на краях моих элементов пути

Отредактировано: Например, просто представьте, что мы создаем комнату с использованием прямоугольника, и в этой комнате мы должны зафиксировать дверь или окно, например, отмеченные как закругленные красные, чтобы мы могли перемещать путь по всему положению прямоугольника но он должен только по краям не внутри rect или за пределами rect, нет никаких проблем с этим, мы сделали это,

Но теперь мы хотим разделить стену на расширенную стену, чтобы мы преобразовали rect в path после преобразования этих дверей или окон не двигались вместе с краями path, вместо этого двери перемещаются в любом месте рабочей зоны из SVG-EDIT

и здесь мои двери и окна являются g не ellipse, так что я знаю эллипс только имеют сх, су и g может иметь transform так я не ясно, как это сделать я надеюсь, что это будет иметь смысл

источник

2014-09-29 Jothi Kannan

Поскольку [связанная скрипка] (http://jsfiddle.net/fuzic/kKLtH/) делает то, что вы хотите (фигура перемещается только по краям пути), можете ли вы объяснить, как у вас возникают трудности при адаптации что к вашей ситуации? – AmeliaBR

в скрипке они использовали 'Raphael.js', и я использую' SVG', поэтому я не знаю, как приспособить эту функцию к моему SVG-Edit. –

Можете ли вы переписать вопрос, чтобы более четко объяснить это? В отношении методов getTotalLength и 'getPointAtLength' нет ничего специфичного для Raphael: они оба [определены в спецификациях SVG] (http://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathElement). Все остальное легко перевести на стандартный Javascript, как только вы нарисовали соответствующие фигуры. – AmeliaBR

Вам нужно настроить мои SO answer, см. Раздел комментария для скрипки треугольника (SO wont let me post fiddle link без кода). В основном протяните линию от центра тяжести треугольника и вычислите путь пересечения.

Edit: В родной SVG, вам нужно intersection библиотеку для линии с линией

ли выкладываю обновленный код здесь для будущих читателей.

источник

2014-09-30 18:21:51

Элементы перетаскивания SVG по краям пути

ответ

Смежные вопросы