FabricJS Canvas 上的 React DropDown 组件

Question

我可以在FabricJS画布上创建一个文本框。但是我无法在FabricJS画布上创建下拉列表。有一个选项可以使用fabric在FabricJS上创建一个文本框。文本框，但下拉列表无法执行相同的操作。请参阅下面的代码，了解如何在 FabricJs 上创建文本框，如果我想在 FabricJS 画布上创建 DropDown 组件，请告知我如何做同样的事情。

如果除了使用 FabricJS 之外还有其他选择可以提供更大的灵活性，并且它是创建复杂组件的更好选择，请分享链接或来源来帮助我。

关于如何在 FabricJS 画布上创建文本框的代码

export default function TextBox(props) {
useEffect(() => {
var text = new fabric.Textbox("Enter Text Here", {
left: 10,
top: 50,
width: 294,
height: 60,
fontStyle: "normal",
color: "#999999",
fontWeight: 375,
fontSize: 12,
backgroundColor: "#ffffff",
borderColor: "#ABB3BF",
padding: 20,
showTextBoxBorder: true,
textboxBorderColor: "green",
borderStyle: "solid",
});
props.canvas.add(text);
});
return null;
}

Answer 1

我不认为你可以在FabricJS中默认这样做。但是，您可以在结构对象上添加自定义控件，然后将子菜单/下拉组件添加为上下文菜单。ReactJS有几个上下文菜单库，如"React-Contextify"。