在DropDown画布上响应FabricJS组件

Question

我能够在TextBox画布上创建一个FabricJS。但是我无法在FabricJS画布上创建下拉列表。有一个选项可以使用fabric.Textbox在FabricJS上创建一个TextBox，但是对于下拉列表不能这样做。请看下面关于我如何在FabricJs上创建文本框的代码，如果我想在一个DropDown画布上创建一个FabricJS组件，那么请告诉我如何做同样的事情。

如果除了使用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中，默认情况下您无法做到这一点。但是您可以在fabric对象上添加自定义控件，然后将子菜单/下拉组件添加为上下文菜单。ReactJS有几个上下文菜单库，比如“”。