Обрезать или обрезать изображение в круг, используя JointJS - PullRequest
Новая
       6

Обрезать или обрезать изображение в круг, используя JointJS

0 голосов
/ 02 октября 2018

Я очень плохо знаком с JointJS и SVG, поэтому мне сложно интерпретировать некоторые документы для JointJS.Я пытаюсь получить случайно выбранные изображения для отображения по кругу для этого проекта на графике, который использует JointJS для отображения и связывания изображений со стрелками.Я убежден, что это не должно быть так сложно, как я делаю, но я потратил часы на изучение документации, поэтому мне нужна помощь.Из того, что я могу сказать, элементы joint.shapes.standard.Circle не могут принимать изображение в качестве фона или заливки.Я был бы очень рад использовать элементы .BorderedImage, но когда я изменяю радиус, чтобы сделать их окружностью, граница изменяется без обрезки изображения.Я также попытался использовать элемент .Image и изменить радиус, и снова изображение не изменилось.У меня сложилось впечатление, что я мог бы добавить определение clipPath к .Image или .BorderedImage для принудительного создания круга, но я недостаточно знаком с синтаксисом, чтобы понять, где это сделать, и ни одного из примеров, которые я нашелна stackoverflow дали мне достаточно информации, чтобы сделать это.Я пытался использовать метод .define и продолжал выдавать ошибки «невозможно прочитать определение свойства неопределенных», поэтому я знаю, что не использовал это право.
Вот что я имею в виду безошибочного кода (округленная граница, которая не обрезается): 

var graph = new joint.dia.Graph;

    var paper = new joint.dia.Paper({
        el: document.getElementById('myholder'),
        model: graph,
        width: 600,
        height: 600,
        gridSize: 1,
        // makes code not draggable
        interactive: { elementMove: false, arrowheadMove: false }
    });
var borderedImage = new joint.shapes.standard.BorderedImage();
    borderedImage.resize(100, 100);
    borderedImage.position(100, 100);
    borderedImage.attr('root/title', 'joint.shapes.standard.BoarderedImage');
    borderedImage.attr('label/text', 'Monster\nImage');
    borderedImage.attr('border/rx', "50%");
    borderedImage.attr('image/xlinkHref', './assets/images/monster.svg');
    borderedImage.addTo(graph);

Код, который я пробовал для .define, выглядел так: 

joint.shapes.Element.define('standard.BorderedImage', {
        attrs: {
            body: {
                rx: "50%"
            }
        }
    })

Вот некоторые ресурсы, на которые я смотрел и не мог понять, как правильно их использовать:
Помещение нескольких фильмов в круг в Raphael / Joint.js
Как установить фоновое изображение для прямоугольника в JointJs?
Использование предопределенного файла SVG для создания пользовательской фигуры JointJS с портами
https://resources.jointjs.com/docs/jointjs/v2.1/joint.html#dia.Paper.prototype.properties

...