Я новичок в javascript и SVG, и у меня нет графического фона программирования, и это мой первый проект, использующий все эти. Так что я начал делать пользовательский элемент так же, как Mike Goodwin answer предложенные и я закончил с этим кодом после его редактирования:Как использовать Jointjs и SVG для рисования элементов инструмента
joint.shapes.tools.tooledElement = joint.shapes.basic.Generic.extend({
toolMarkup: [
'<g class="element-tools">',
'<g class="element-tool-remove"><circle fill="red" r="11" stroke="black" stroke-width="1"/>',
'<path transform="scale(.7) translate(-16, -16)" stroke="black" stroke-width="1" d="M24.778,21.419 19.276,15.917 24.777,10.415 21.949,7.585 16.447,13.087 10.945,7.585 8.117,10.415 13.618,15.917 8.116,21.419 10.946,24.248 16.447,18.746 21.948,24.248z"/>',
'<title>Remove this element from the model</title>',
'</g>',
'<g class="element-tool-link"><circle fill="green" r="11" cx="160" cy="40" stroke="black" stroke-width="1"/>',
'<path transform="scale(.7) translate(-16, -16)"/>',
'<title>creates a new link</title>',
'</g>',
'</g>'
].join(''),
defaults: joint.util.deepSupplement({
attrs: {
text: { 'font-weight': 400, 'font-size': 'small', fill: 'black', 'text-anchor': 'middle', 'ref-x': .5, 'ref-y': .5, 'y-alignment': 'middle' }
}
}, joint.shapes.basic.Generic.prototype.defaults)
});
, которая работает должным образом. Теперь я хотел бы нарисовать линию на зеленом круге и сделать красный круг на красный квадрат. Для этого я посмотрел this учебник по путям рисования и this учебник по основным фигурам. Но если я попытаюсь сделать линию на зеленом круге следующим образом:
'<path transform="scale(.7) translate(-16, -16)" stroke="black" stroke-width="1" d="x y L 10 10 " />'
ничего не нарисовать. Они говорят: «Если ваш курсор уже был где-то на странице, для подключения двух мест не нарисована линия». и именно поэтому я пропустил «М» из пути.
Итак, вот первый вопрос: Как рисовать линию по центру зеленого круга, не начиная с предыдущей последней точки, определенной на любом другом пути?
Чтобы сделать красный квадрат, я попробовал именно пример из второго урока меняющегося заливку (в качестве теста):
//first line to test
<rect x="10" y="10" width="30" height="30" stroke="black" fill="red" stroke-width="5"/>
или
//second line to test
<rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="red" stroke-width="5"/>
Результатом первой линии будет быть элементом, в котором инструменты используются для повторного намотки выше самого себя:
И вторая строка оказалась бы ничем, кроме шоу.
Так вот следующие вопросы:
Почему результаты первой линии получили, как это? и Как изменить красный круг в любую другую форму?
UPDATE: О линии розыгрыша:
'<path transform="scale(.7) translate(-16, -16)" stroke="black" stroke-width="1" d="M150 150 H 5 V 5 H 5 z" />'
Если я использую этот код, например, это является результатом:
'<path transform="scale(.7) translate(-16, -16)" stroke="black" stroke-width="1" d="M150 150 H 5 V 5 H 5 z" />'
Если я использую этот другой код, то результатом будет:
Учебник привело меня к мысли, что M является определение начальной точки, но изменяя translate(-16, -16) к чему-то еще сделал правильный стартовая точка возможно. Таким образом, его атрибут translate объединяется с M, который устанавливает начальную точку.
Пути должны начинаться с M (или m). Ваши x и y кажутся буквальными строковыми значениями, а не переменными, которые тоже не будут работать. –
x и y на самом деле являются числами моего кода. Они не являются буквальной строкой, я просто забыл дать понять, что для любого значения x и y это не сработает. если я добавлю M или m, ничья начнется в конце предыдущей ничьей, как я уже говорил ранее. Например, на картинке выше, она начнется в конце белого «X» в левом верхнем углу и будет рисовать на зеленый круг, как если бы это был фрагмент второй ничьей. – Pfeiffer
Ну, вы можете настроить M на то, что вы хотите. Он не начнется с предыдущего розыгрыша, он начнется, когда вы установите стартовую точку M. –