fabricJS：鼠标按下不同的按钮

Question

我在同一个页面上制作了多个画布（取决于 pdf 页面），效果很好..

但是当我添加按钮来添加不同的画布时，有些按钮无法正常工作！我想做什么？好吧，我正在尝试为不同的画布添加 ex: text on (mouse: down)。

这是我的代码：

HTML

<a href="#" id="addText" class="tool-button">
    <span>
       <i class="fa fa-pen"></i>
    </span>
</a>
<a href="#" id="addRect" class="tool-button">
    <span>
    <i class="fa fa-rectangle"></i>
    </span>
</a>

JS

    const canvasFArea = () => {
    $(".spread .page").each(function () {
      $(this).append(
        "<div class='canvasArea'><canvas></canvas></div>"
      );
    });
    $(".canvasArea canvas").each(function () {
      let target = $(this).closest(".page").attr("data-page-number");
      $(this).attr("id", target);
      var canvas = new fabric.Canvas(target);
      canvas.renderAll();

      function addText(e) {
        var customtxt = new fabric.IText('Tap and Type', {
          fontFamily: 'helvetica',
          fontSize: 30,
          fontWeight: 400,
          fill: 'red',
          fontStyle: 'normal',
          top: e.offsetY,
          cursorDuration: 500,
          left: e.offsetX,
        });
        canvas.add(customtxt);
      }
      function addRect() {
        var rect = new fabric.Rect({
          left: 100,
          top: 50,
          fill: 'yellow',
          width: 200,
          height: 100,
          objectCaching: false,
          stroke: 'lightgreen',
          strokeWidth: 4,
        });
    
        canvas.add(rect);
        canvas.setActiveObject(rect);
      }
      

      canvas.setWidth($(".page").width());
      canvas.setHeight($(".page").height());

      $(".tool-button").on("click", function() {
        $(".tool-button").removeClass("active");
        $(this).addClass("active");
        const addRectF = () => {
            if ($("#addRect").hasClass("active")) {
                canvas.on("mouse:down", function(options) {
                    if (options.target == null) addRect();
                });
            } else {
                canvas.off("mouse:down", );
            }
        }
        addRectF();
    });
    $(".tool-button").on("click", function() {
        $(".tool-button").removeClass("active");
        $(this).addClass("active");
        const addTextF = () => {
            if ($("#addText").hasClass("active")) {
                canvas.on("mouse:down", function(options) {
                    if (options.target == null) addText(options.e);
                });
            } else {
                canvas.off("mouse:down", );
            }
        }
        addTextF();
    });

      $(".saveCanvas").on("click", function () {
        let dataSave = JSON.stringify(canvas)
        localStorage.setItem(target, JSON.stringify(dataSave));
      })
      $(".load").on('click', function () {
        let loadData = JSON.parse(localStorage.getItem(target));
        canvas.loadFromJSON(loadData);
      })
    });
  };
  canvasFArea();

文本工作正常，但是当我尝试添加时矩形不工作，任何线索或修复或这个？请不要介意我的代码我还可以分享一段视频，说明我正在努力实现您想要的身份。

Answer 1

代码看起来很完美。请通过为“addRect()”函数添加一些代码来更新您的问题。可能是该功能中的问题

希望以下代码对您有所帮助

$(".canvasArea canvas").each(function () {
      let target = $(this).closest(".page").attr("data-page-number");
      $(this).attr("id", target);
      var canvas = new fabric.Canvas(target);
      

      function addText(e) {
        var customtxt = new fabric.IText('Tap and Type', {
          fontFamily: 'helvetica',
          fontSize: 30,
          fontWeight: 400,
          fill: 'red',
          fontStyle: 'normal',
          top: e.offsetY,
          cursorDuration: 500,
          left: e.offsetX,
        });
        canvas.add(customtxt);
      }
      function addRect() {
        var rect = new fabric.Rect({
          left: 100,
          top: 50,
          fill: 'yellow',
          width: 200,
          height: 100,
          objectCaching: false,
          stroke: 'lightgreen',
          strokeWidth: 4,
        });
    
        canvas.add(rect);
        canvas.setActiveObject(rect);
        canvas.renderAll();
      }

fabricJS：鼠标按下不同的按钮

fabricJS: mouse down for different buttons

javascript

jquery

canvas

fabricjs

pdf.js