fabricJS：滑鼠按下不同的按鈕

我在同一頁面中制作了多個畫布（取決于 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();

文本運行良好，但是當我嘗試添加時，矩形不起作用，有任何線索或修復還是這個？請不要介意我的代碼??我還可以分享我正在嘗試實作您想要的 id 的視頻。

uj5u.com熱心網友回復：

代碼看起來很完美。請通過為“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();
      }

標籤：javascript jQuery 帆布 面料 pdf.js

上一篇：重新啟用右鍵單擊網頁：“Voiddocumentoncontextmenunull”技巧不起作用

下一篇：如何在反應中為此物件文字添加換行符？