Question

我对JointJS和SVG都是陌生的，所以我很难解释JointJS的一些文档。我正在尝试让随机搜索的图像在该项目的圆圈中显示，该图像使用JointJS来显示和链接带有箭头的图像。我相信这不应该像我所做的那样困难，但是我花了数小时来阅读文档，因此我需要帮助。据我所知，joint.shapes.standard.Circle元素无法将图像作为背景或填充。我真的很乐意使用.BorderedImage元素，但是当我更改半径以使其成为圆形时，边框会更改而不会裁剪图像。我还尝试使用.Image元素并更改半径，并且图像也没有变化。我的印象是我可以在.Image或.BorderedImage中添加一个clipPath定义来强制一个圆，但是我对语法不太了解，无法清楚地知道在哪里做，也没有找到任何示例在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%"
            }
        }
    })

我看过的一些无法弄清楚如何正确使用的资源是：
Putting multiple films in a circle in Raphael/Joint.js
How to set background image for a rectangle in JointJs?
Using predefined SVG file for creating a custom JointJS shape with ports
https://resources.jointjs.com/docs/jointjs/v2.1/joint.html#dia.Paper.prototype.properties

使用JointJS将图像裁剪或裁剪为Circle

0 个答案: