如何使用draw2d绘制自定义形状？含HTML/CSS形状转换需求

完全可以实现，核心是通过自定义draw2d形状类嵌入HTML内容，并添加端口，再配合拖拽逻辑完成需求。以下是具体实现步骤和代码示例：

1. 自定义带HTML内容的draw2d形状类 #

继承draw2d的基础形状类（比如draw2d.shape.basic.Rect），在初始化方法中设置HTML内容并添加输入输出端口：

// 自定义HTML形状类
function CustomHtmlShape() {
    // 调用父类构造函数
    draw2d.shape.basic.Rect.call(this);
    
    // 设置形状基础尺寸
    this.setSize(120, 80);
    
    // 添加左侧输入端口
    this.createPort("input", new draw2d.layout.locator.LeftLocator());
    // 添加右侧输出端口
    this.createPort("output", new draw2d.layout.locator.RightLocator());
    
    // 嵌入你的HTML/CSS形状内容（替换成你已有的样式结构即可）
    this.setHtml(`
        <div style="width:100%;height:100%;background:#f0f8ff;border:2px solid #4682b4;border-radius:8px;display:flex;align-items:center;justify-content:center;">
            <span style="font-size:14px;color:#333;">自定义HTML形状</span>
        </div>
    `);
}

// 继承父类原型链
CustomHtmlShape.prototype = Object.create(draw2d.shape.basic.Rect.prototype);
CustomHtmlShape.prototype.constructor = CustomHtmlShape;

2. 实现拖拽功能 #

将页面上的HTML/CSS形状作为拖拽源，拖拽到draw2d画布时实例化自定义形状：

HTML结构 #

<!-- 拖拽源：你的HTML/CSS形状 -->
<div id="dragSource" style="width:120px;height:80px;background:#f0f8ff;border:2px solid #4682b4;border-radius:8px;cursor:move;display:flex;align-items:center;justify-content:center;margin-bottom:10px;">
    拖拽我到画布
</div>

<!-- draw2d画布容器 -->
<div id="canvas" style="width:800px;height:600px;border:1px solid #ccc;"></div>

拖拽逻辑JS #

// 初始化draw2d画布
const canvas = new draw2d.Canvas("canvas");

// 绑定拖拽源的dragstart事件
const dragSource = document.getElementById("dragSource");
dragSource.addEventListener("dragstart", (e) => {
    e.dataTransfer.setData("text/plain", "customHtmlShape");
    e.dataTransfer.effectAllowed = "copy";
});

// 画布容器绑定dragover事件，允许放置
canvas.getHtmlContainer().addEventListener("dragover", (e) => {
    e.preventDefault();
    e.dataTransfer.dropEffect = "copy";
});

// 画布容器绑定drop事件，创建形状
canvas.getHtmlContainer().addEventListener("drop", (e) => {
    e.preventDefault();
    if (e.dataTransfer.getData("text/plain") === "customHtmlShape") {
        // 将鼠标位置转为画布坐标
        const canvasPos = canvas.fromDocumentToCanvasCoordinate(e.clientX, e.clientY);
        // 实例化自定义形状
        const customShape = new CustomHtmlShape();
        // 设置形状在画布中的居中位置
        customShape.setPosition(canvasPos.x - customShape.getWidth()/2, canvasPos.y - customShape.getHeight()/2);
        // 添加到画布
        canvas.add(customShape);
    }
});

3. 注意事项 #

• 复杂HTML/CSS形状建议使用独立CSS类，避免与draw2d内置样式冲突；
• 端口位置可通过自定义draw2d.layout.locator.Locator子类来精准控制；
• 如需扩展交互（比如双击编辑HTML内容），可在自定义形状类中添加onDoubleClick等事件监听；
• 确保使用的draw2d版本（你用的v6）支持setHtml方法和端口创建API。

内容的提问来源于stack exchange，提问作者Shashank Bhatt