在Joint js中绘制造型圈

Question

我正在使用 Joint Js 作为我的自定义绘图工具。而且我画下图的元素有点问题，我觉得应该是自定义边框的Circle元素，但是我不知道怎么画边框。

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

需要元素

Answer 1

这很容易。

你只需要一个类型的形状：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}
        }
    })

在Joint js中绘制造型圈

Draw Styling circle in Joint js

javascript

html

css

jointjs