Блог

Главная - Вопросы по программированию - Получение ширины в перетаскиваемой функции SVG.js

Получение ширины в перетаскиваемой функции SVG.js

#svg.js

#svg.js

Вопрос:

Я знаю, что могу получить его с помощью функции width или size, но я пытаюсь сделать это в момент создания перетаскиваемого объекта.

Я делаю это, потому что мне нужно придать элементу эффект сетки, а также заставить его оставаться внутри области рисования.

Вот что-то похожее на то, что я пытаюсь сделать:

 square = draw.rect(size, size).x(x).y(y).draggable(function(x, y){
var xend = x - x % size;
var yend = y - y % size;

if(xend < 0)
    xend = 0;
if(yend < 0)
    yend = 0;

if(xend > 1000)
    xend = 1000 - width*;

return { x: xend, y: yend } 
});

Переменная с * — это то, что я хочу получить.

Также было бы здорово знать, как разрешить svg.js элементы взаимодействуют с jquery, но я думаю, это уже другой вопрос.

Редактировать: Ну, теперь на самом деле мне нужен доступ к другим свойствам элемента, если я не могу сделать это из перетаскиваемого элемента, я думаю, мне следует поискать другой способ сделать его перетаскиваемым? : ( пожалуйста, помогите!

Комментарии:

1. Ну, я, наконец, сделал это. Я использовал функцию SVG.get() . Позже я прокомментирую ответ, чтобы показать, как это можно сделать.

2. Вы можете просто использовать square.box().width в функции. Если ширина не изменяется, вы должны кэшировать ее для повышения производительности. Использование SVG.get заключается в том, что ситуация далека от оптимальной с точки зрения производительности.

3. К сожалению, нет, javascript просто выдает square.box не является функцией

4. Извините, это должно быть square.bbox() . Я путешествую и пишу на своем мобильном телефоне.

Ответ №1:

Решение (как сказал Нильс), например, использовать функцию square.bbox:

 square = draw.rect(size, size).x(x).y(y).draggable(function(x, y){
var xend = x - x % size;
var yend = y - y % size;

if(xend < 0)
    xend = 0;
if(yend < 0)
    yend = 0;

if(xend > 1000)
    xend = 1000 - square.bbox().width;

return { x: xend, y: yend } 
});

Кроме того, если вы хотите получить доступ к элементу позже, вы можете назначить идентификатор с помощью метода square.attr(‘id’,‘id_name’) и вызвать с помощью метода SVG.get(‘id_name’).

Ответ №2:

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

Таким образом, решение было бы:

 square = draw.rect(size, size).x(x).y(y).draggable(function(x, y){
    var xend = x - x % size;
    var yend = y - y % size;

    if(xend < 0)
        xend = 0;
    if(yend < 0)
        yend = 0;

    if(xend > 1000)
        xend = 1000 - this.attr('width')

    return { x: xend, y: yend } 
});

Кстати: Почему вы ищете ширину и используете размер несколькими строками выше? Это то же значение, потому что вы просто устанавливаете ширину в размер

Метки: