Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/84.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/heroku/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在关节中绘制造型圆_Javascript_Html_Css_Jointjs - Fatal编程技术网

Javascript 在关节中绘制造型圆

Javascript 在关节中绘制造型圆,javascript,html,css,jointjs,Javascript,Html,Css,Jointjs,我正在为我的自定义绘图工具使用Joint Js。 我在画下图中的元素时遇到了一些问题,我认为应该是带有自定义边框的圆形元素,但我不知道如何画这样的边框 有人知道如何解决这个问题吗 所需元素 这很容易 您只需要一个类型为:basic.Image 我创建了你需要的base64图片 只需将此代码粘贴到模具上,即可完成 new joint.shapes.basic.Image({ attrs: { image: { width: 50, height: 50, '

我正在为我的自定义绘图工具使用Joint Js。 我在画下图中的元素时遇到了一些问题,我认为应该是带有自定义边框的圆形元素,但我不知道如何画这样的边框

有人知道如何解决这个问题吗

所需元素

这很容易

您只需要一个类型为:
basic.Image

我创建了你需要的base64图片

只需将此代码粘贴到模具上,即可完成

new joint.shapes.basic.Image({
        attrs: {
            image: { width: 50, height: 50, 'xlink:href': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAB0VBMVEUAAADVACvYACfYACfYACfYACfYACfYACfVACrYACfYACfYACfYACfYACfYACfYACfZACbbACTYACfYACfZACbYACfVACvYACf/AADZACbWACnYACfVACvXACjYACfZACbXACjYACfYACfYACfYACfYACfYACfZACbXACjYACfYACfWACnZACbYACfMADPYACfbACTXACjaACbYACfaACXcACPZACbYACfYACfYACfYACfYACfWACnYACfZACbVACvXACjYACfXACjXACjXACjXACjYACfYACfWACnbACTXACjYACfYACfZACbYACfYACfYACfZACa/AEDXACjYACffACDXACjZACbXACjZACbYACfXACjYACfZACbYACfXACjYACfbACTYACfYACfbACTYACfZACbZACbYACfYACf/AADYACfbACTXACjZACbZACbZACbYACfjABzYACfYACfZACbYACffACDYACfZACbVACvYACfXACjaACXYACfbACTYACfYACfXACjXACj/AADZACbYACfaACXXACjYACfYACfZACbYACfTACzYACfYACfXACjXACjYACfYACfYACfYACfYACfYACfYACfYACcAAABaMEySAAAAmXRSTlMABqiXIbD7oytU7e7s6+rp6BX+rzVjGIQCZRm4EmbeL2ca9lu8iWkbP/p7HzbKCs8cbUTvNx0o373wJ/FF/UkeTMt0elOutcMlKhP8m59c+JiZBEbzCHOttIxibKU9vibWDvfFI6w8k57jAecxM35/cuUJ5nfbDRB8hQz5OT5vB+HMzmAD1MkpTXXiZKoX2c2BOjuC9C6Q8tGPRJElAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAAN1wAADdcBQiibeAAAAAd0SU1FB+IFBxY1HGz05tsAAAM6SURBVFjDpZd7WxJBFMaPmjdE0K3I0ii1EMTQ8JLiLdOyJLVIMM1MMzPtZhJmaiF5T0sLRefbtoJnZheWZfbp/DXnPef3srMzzO4CcEcaf6typGec+T+DTJKVnaNcytXl5el0Or0+P99gMBoLCgqVDQgRzp5TdDgvEFmYkhmIFheKlIoX5Q6XkhsQUlyiVL0scBsQ8xWl8lWpQ6mqASkrV6pf4zcg5Hpi2SKdQkUqA2KJr1ptKQ0qpZO0WeVFu4GkNICqG5IWg11aclTL90GNogEU3cxiPdUOSSWbcBkAOGtZUzaT65haEJ1ofTIDaLjFeuuo2ki1JpdFUDWAhmba3IhaC5Va28T1FB3akxvA7Vba3nIqdVDlTnRHCKoG0EnbO2JCFxXuxgSLYFczgHsU6Irm3Zhm3T/tsKheATygk+g+SXvcmD4EzuhFwt0jZn2Y9dfzGrT3I9MnZumYPOLlAR4jkw7goXvrCb9BGzK1HrDieEDDue8tQ8oKPhwO8vMAT5HywRAOh7UYPENqCEZw+FyLgROpERjF4QstBjlIjcIYDse1GJQgNQa4ii+18AC4lWoBF6RJmwGeCmVgxovxauEdSJlhAod2LQavkJqASRxWaTF4jdQkTMkPB84oR2qKHVAZWgzeINXJDrRpDfzMW3bd4zYcv+M3eI+MTdx+dC9/4Df4yHYywCwmn+Z4eYcfmVkxc2ESeyrwxGeKuE7SAGb583z8lzwkAtF8gWi8C18psBDNF+nLxdIyD/+NrpthMaZ8p44FNan5dvYy8/1UCq5QKZRyJeZ+0OaVIIqrVCODQXU+OMh6V6m6ts7UjVI1vnSDda6vMX2TvXYQv8qdXPazvuZNaWVL8g64tJ1kGt7tJdYlbMmLlUQSP4fXEnHPzrS0pzK+viutkrHhX/Kyaee3rGE34Qcce7IGInTs/zFFvy2KTH/3Q3FfJHuOxEuczyQJ4faHQn53op6p+K+ZCQuEK4TwTJJVyj3g4Q9yk6/zoTk1bz5U22len14d1/tSPcHGwwPJ8YEwzzO8MHKkjB9FCjnwk0hzRgLxdCDi1Pb17fL1Fh8bxYUVjMfFvT6XJpiFp6LCo97xD9G9KT8fiyixAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE4LTA1LTA3VDIyOjUzOjI4KzAyOjAwwNjrNgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOC0wNS0wN1QyMjo1MzoyOCswMjowMLGFU4oAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAAAElFTkSuQmCC' },
            text: { text: 'Circle Shape', fill: '#000000', 'font-size': 12, stroke: '#000000', 'stroke-width': 1}
        }
    })

我的答案解决了你的问题吗?非常感谢,a找到另一个解决方案,但你的解决方案非常简单。如果你测试了它并且它有效,请接受它作为你问题的答案。