Draw2D React ReferenceError：未定义拉斐尔

编程问答 2022-05-25

问题描述

将 draw2d 添加到我的 reactjs 应用程序后，该组件加载“ReferenceError: Raphael is not defined”错误。

enter image description here 这是我尝试获得一些输出的代码

http://jsfiddle.net/6pbjh3s6/1/ 我试图在我的 React 组件中实现的示例代码

import React,{ useEffect } from 'react'
// import 'react-raphael'
import 'jquery-ui-bundle' // you also need this
import 'jquery-ui-bundle/jquery-ui.css'
import 'raphael'
import $ from 'jquery'
import draw2d from 'draw2d'

/**
 * Component: DesignPanel
 * @returns {JSX.Element}
 */
function DesignPanel() {
  useEffect(() => {
    // eslint-disable-next-line func-names
    $(function () {
      const draw2DCanvas = new draw2d.Canvas('draw2Did')

      draw2DCanvas.setScrollArea($(window))

      const rect = new draw2d.shape.basic.Rectangle(100,80)
      const rect2 = new draw2d.shape.basic.Rectangle(50,80)
      draw2DCanvas.addfigure(rect,100,50)
      draw2DCanvas.addfigure(rect2,300,150)

      $('#draw2Did').resizable({
        maxHeight: 600,maxWidth: 600,minHeight: 400,minWidth: 400,})

      // eslint-disable-next-line func-names
      $('#draw2Did').on('resizestop',function (event,ui) {
        $('#draw2Did').find('svg').width($('#draw2Did').width())
        $('#draw2Did').find('svg').height($('#draw2Did').height())
        // eslint-disable-next-line no-console
        console.log(event,ui)
      })
    })
  },[])

  return (
    <>
      <div
        id="draw2Did"
        style={{
          width: '500px',height: '500px','-webkit-tap-highlight-color': 'rgba(0,0)',}}
        className="ui-widget-content"
      />
    </>
  )
}

export default DesignPanel

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

draw2djqueryreactjsreactjsreactjsreactjs