javascript - 如何重命名对象并在 FabricJS 中渲染 Canvas ？-6ren

javascript - 如何重命名对象并在 FabricJS 中渲染 Canvas ？

转载作者：行者123 更新时间：2023-12-05 05:35:53

我正在使用 FabricJS 5 并为我的图层实现了一个简单的显示。

当我按下铅笔按钮时，我会打开提示并使用以下函数重命名图层:

function RenameLayer(name) {
  let layerObj = canvas.getItemByAttr("name", name);
  let newName = prompt("Rename Layer?", layerObj.name);

  while (checkIfNameExists(newName)) {
    alert("Your layer name: " + layerObj.name + " is NOT unique please rename your layer differently.")
    newName = prompt("Rename Layer?", layerObj.name);
  }

  layerObj.name = newName;
  canvas.renderAll();
}

function checkIfNameExists(newName) {
  count = 0;

  canvas.forEachObject(function(obj, i) {
    if (obj.name == newName) {
      count++;
    }
  });

  if (count > 0) {
    return true;
  } else {
    return false;
  }
}

但是，重命名后出现错误。

在下面找到我的示例:

<html lang="en">

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.0/font/bootstrap-icons.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">

  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      padding: 0;
      margin: 0;
    }
    
    body {
      touch-action: none;
      background-image: linear-gradient(to bottom left, rgb(214, 240, 201) 10%, rgba(255, 231, 191, 1) 80%);
      -webkit-user-select: none;
      -moz-user-select: -moz-none;
      -ms-user-select: none;
      user-select: none;
    }
    
    .input-group {
      padding: 4px;
    }
    
    .canvas-container {
      margin: 0 auto;
      width: 100%;
      overflow: hidden;
      background: url(./transparent.png);
      background-size: 15px 15px;
      box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    }
    
    .actived {
      background: #fff9a8;
    }
    
    #sortable {
      max-height: 200px;
      overflow: scroll;
    }
    
    .list-group {
      line-height: 35px;
    }
    
    .svg-icon {
      width: 1em;
      height: 1em;
    }
    
    .svg-icon path,
    .svg-icon polygon,
    .svg-icon rect {
      fill: #4691f6;
    }
    
    .svg-icon circle {
      stroke: #4691f6;
      stroke-width: 1;
    }
    
    #bkboxXX {
      background: url(transparent.png);
      border: 1px solid rgba(0, 0, 0, 0.3);
      display: inline-block;
      height: 19px;
      width: 20px;
    }
    
    .bk-btn {
      background: url(/transparent.png);
    }
    
    .fl {
      float: left;
    }
    
    .fr {
      float: right;
    }
    
    .input-group-text {
      background-color: #f4f4f4;
    }
    
    .input-group-sm>.input-group-text {
      /*
            padding: .2rem .3rem !important;
            */
    }
    
    .list-group-item {
      padding: 2px 10px;
      ;
      cursor: pointer;
    }
    
    .list-group {
      border-radius: 0;
      text-align: left;
    }
  </style>
</head>

<body>
  <div class="container-fluid h-100">
    <div class="row h-100">
      <div class="col-sm-3 border-end text-center h-100 overflow-scroll bg-light py-3">
        <div class="form-floating w-100 mb-3 tour5">
          <h6 class="mb-3">Add Element</h6>
          <button class="btn btn-outline-primary" onclick="addText();" data-toggle="tooltip" data-placement="top" title="" data-bs-original-title="Add Text" aria-label="Add Text"><i
                            class="fa fa-font"></i></button>

          <button class="btn btn-outline-primary" data-toggle="tooltip" data-placement="top" title="" onclick="  canvas.add(new fabric.Circle({ name: genNextName(), originX:'center', originY:'center',  radius: 30, fill: 'green', top: 100, left: 100 }));" data-bs-original-title="Add Circle"
            aria-label="Add Circle"><i
                            class="fa fa-circle"></i></button>
          <button class="btn btn-outline-primary" data-toggle="tooltip" data-placement="top" title="" onclick="  canvas.add(new fabric.Triangle({  name: genNextName(),  originX:'center', originY:'center', height:100, width:100, fill: 'red', top: 100, left: 100 }));"
            data-bs-original-title="Add Triangle">
                        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="triangle" role="img"
                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class=""
                            style="height: 16px;top: 9px;">
                            <path fill="currentColor"
                                d="M329.6 24c-18.4-32-64.7-32-83.2 0L6.5 440c-18.4 31.9 4.6 72 41.6 72H528c36.9 0 60-40 41.6-72l-240-416z"
                                class=""></path>
                        </svg>
                    </button>
          <button class="btn btn-outline-primary" data-toggle="tooltip" data-placement="top" title="" onclick="canvas.add(new fabric.Rect({ name: genNextName(),  originX:'center', originY:'center', left: 110, top: 110, fill: '#000', width: 50, height: 50 }))" data-bs-original-title="Add Rectangle"><i class="fa fa-square-full"></i> </button>
        </div>
        <hr>
        <div class="w-100  tour7 Xd-none Xd-sm-block">
          <h6 class="mb-3">Elements</h6>
          <ul class="list-group" id="sortable"></ul>
        </div>
      </div>
      <div class="col-sm-6 my-auto py-4 overflow-hidden">
        <div class="canvas-container" style="width: 329px; height: 329px; position: relative; user-select: none;"><canvas id="c" class="lower-canvas" width="329" height="329" style="position: absolute; width: 329px; height: 329px; left: 0px; top: 0px; touch-action: none; user-select: none;"></canvas>
        </div>
      </div>
      <div class="col-sm-3 border-start py-3 h-100 overflow-scroll bg-light text-center">
        right map
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
  <script src="https://unpkg.com/fabric@5.2.1/dist/fabric.min.js"></script>
  <script src="https://rawcdn.githack.com/lyzerk/fabric-history/8c223cbdc8305307b4a8f8710f97da54d9146ffa/src/index.js"></script>
  <script src="https://rawgit.com/fabricjs/fabric.js/master/lib/centering_guidelines.js"></script>
  <script src="https://rawgit.com/fabricjs/fabric.js/master/lib/aligning_guidelines.js"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js"></script>

  <script>
    const rgba2hex = (rgba) => `#${rgba.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+\.{0,1}\d*))?\)$/).slice(1).map((n, i) => (i === 3 ? Math.round(parseFloat(n) * 255) : parseFloat(n)).toString(16).padStart(2, '0').replace('NaN', '')).join('')}`

    function cn2h(cn) {
      if (!cn) {
        return 'transparent';
      }
      d = document.createElement("span");
      d.style.display = "none";
      d.style.color = cn
      document.body.appendChild(d)
      return rgba2hex(window.getComputedStyle(d).color);
    }
  </script>
  <script>
    var canvas;
    var apiUrl;
    var startedLoadingFamilies = false;
    var to;
    var scale;

    fabric.Text.prototype.set({
      _getNonTransformedDimensions() { // Object dimensions
        return new fabric.Point(this.width, this.height).scalarAdd(this.padding);
      },
      _calculateCurrentDimensions() { // Controls dimensions
        return fabric.util.transformPoint(this._getTransformedDimensions(), this.getViewportTransform(), true);
      }
    });

    function fitCanvas(w, h) {
      var scaleW = (document.querySelectorAll(".col-sm-6")[0].offsetWidth - 100) / w;
      var scaleH = (document.querySelectorAll("body")[0].offsetHeight - 100) / h;
      scale = Math.min(scaleH, scaleW);

      if (scale > 1) {
        scale = 1;
      }


      canvas.setZoom(scale);
      canvas.setWidth(w * scale);
      canvas.setHeight(h * scale);

      initAligningGuidelines(canvas);
      initCenteringGuidelines(canvas);

      canvas.renderAll();
      console.log("finished!!");

    }

    (function() {
      canvas = new fabric.Canvas('c', {
        allowTouchScrolling: true
      });
      WebFont.load({
        google: {
          families: ["Inter:200"]
        },
        active: function() {
          canvas.loadFromJSON({
            "height": "500",
            "width": "500",
            "edit": "yes",
            "objects": [],
            "backgroundImage": {
              "crossOrigin": "anonymous"
            }
          }, function() {
            fitCanvas(500, 500);
          })
        }
      });

      canvas.on('before:render', function(opt) {
        canvas.getObjects().map(function(o, i) {
          if (o.type.toLowerCase() == "textbox") {
            var maxH = (o.maxHeight) ? (o.maxHeight) : (canvas.height);
            o.set({
              'maxHeight': maxH
            });
            if (o.fontSize > 0 && (maxH > o.fontSize)) {
              while (o.height > maxH) {
                o.set({
                  'fontSize': o.fontSize - 1
                });
              }
            }
          }

          if (o.circleFrame) {
            o.set({
              clipPath: new fabric.Circle({
                radius: o.width / 2,
                originX: 'center',
                originY: 'center'
              })
            });

          }

          if ((o.rx || o.ry) && o.type == "image") {

            let rx = (o.rx || 0);
            let ry = (o.ry || 0);

            o.set({
              clipPath: new fabric.Rect({
                rx: rx,
                ry: ry,
                height: o.height,
                width: o.width,
                originX: 'center',
                originY: 'center'
              })
            });
          }
        });
      });
    })();
  </script>

  <script>
    fabric.Object.prototype.objectCaching = false;

    function setCanvasBG(clr) {
      canvas.backgroundColor = clr;
      canvas.renderAll();
    }

    function changeDim() {
      fitCanvas($("#widthC").val(), $("#heightC").val());
    }

    function setColor(clr, what = 'fill') {
      canvas.getActiveObject().set(what, clr);
      canvas.renderAll();
    }

    (function() {

      $(document).on("mouseenter", "[data-label]", function() {
        $("#font-search").val($(this).data("label"));
        loadFont($(this).data("label"));
      });

      fabric.Canvas.prototype.getItemByAttr = function(attr, name) {
        var object = null,
          objects = this.getObjects();
        for (var i = 0, len = this.size(); i < len; i++) {
          if (objects[i][attr] && objects[i][attr] == name) {
            object = objects[i];
            break;
          }
        }
        return object;
      };

      $("form#f").hide();

      var activeObject;

      $("#f input, #f select").on("input", function() {
        if (["height", "width", "top", "left", "strokeWidth", "charSpacing"].includes(this.name)) {
          canvas.getActiveObject().set(this.name, parseFloat(this.value)).setCoords();

        } else {
          canvas.getActiveObject().set(this.name, this.value).setCoords();
        }
        canvas.renderAll();
      });

      canvas.preserveObjectStacking = true;

      fabric.Object.prototype.toObject = (function(toObject) {
        return function() {
          return fabric.util.object.extend(toObject.call(this), {
            name: this.name,
            text: this.text,
            textAlign: this.textAlign,
            fontSize: this.fontSize,
            charSpacing: this.charSpacing,
            lineHeight: this.lineHeight,
            fontWeight: this.fontWeight,
            fontFamily: this.fontFamily,
            fontStyle: this.fontStyle,
            textBackgroundColor: this.textBackgroundColor,
            originX: this.originX,
            originY: this.originY,
            maxHeight: this.maxHeight,
            height: this.height,
            width: this.width,
            radius: this.radius,
            rx: this.rx,
            ry: this.ry,
            stroke: this.stroke,
            padding: this.padding,
            circleFrame: this.circleFrame
          });
        };
      })(fabric.Object.prototype.toObject);

      canvas.on('object:scaling', function(e) {
        if (e.target.toObject().type != "image" && e.target.toObject().type != "circle") {
          e.target.set({
            width: e.target.width * e.target.scaleX,
            height: e.target.height * e.target.scaleY,
            scaleX: 1,
            scaleY: 1
          })
        }
      });

      canvas.on('object:modified', function(opt) {
        document.body.style.cursor = 'progress';
      });

      canvas.on("after:render", function() {

        $("#sortable").empty();

        canvas.includeDefaultValues = false;
        canvas.toObject().objects.forEach(function(layer, id) {

          if (typeof layer.name !== 'undefined') {
            //console.log(id,layer.name);
            //canvas.getItemByAttr(`name`, layer.name).set({ "name": String.fromCharCode(65 + id).toLowerCase() })
            canvas.getItemByAttr(`name`, layer.name).set({
              "name": layer.name.replace(/ /g, "_")
            })
            var actived = '';
            if (canvas.getActiveObject()) {
              actived = (canvas.getActiveObject().name == layer.name) ? " actived" : "";
            }

            $("#sortable").append('<li class="list-group-item ui-sortable-handle clearfix ' + actived + '" onClick="canvas.setActiveObject(canvas.getItemByAttr(`name`,`' + layer.name + '`)); canvas.renderAll();" id=' + layer.name + '>' + layer.name + ' (' + layer.type + ')' + '<span class="fr button-group"><a class="mx-2" title="Edit" href="#" onClick="RenameLayer(`' + layer.name + '`)"><i class="fa fa-pencil-alt" aria-hidden="true"></i></a><a class="mx-2" title="Delete" href="#" onClick="if(confirm(`Are you sure?`)){canvas.remove(canvas.getItemByAttr(`name`,`' + layer.name + '`)); canvas.renderAll();}"><i class="fa fa-trash-alt" aria-hidden="true"></i></a><a class="me-2"  title="Duplicate this layer" href="#" onClick="Duplicate(`' + layer.name + '`); canvas.renderAll();"><i class="fa fa-clone" aria-hidden="true"></i></a></span></li>');
          }
        });
        document.body.style.cursor = 'default'
      });

      canvas.on("selection:created", function(obj) {
        if ("image" == obj.selected[0].type) {
          canvas.getActiveObject().setControlsVisibility({
            mb: false,
            ml: false,
            mt: false,
            mr: false
          });
        }
        $("form#f input[type!='hidden'], #f select").parent().hide();
        $("form#f").hide();
        canvas.renderAll();
      });

      canvas.on("selection:updated", function(obj) {
        if ("image" == obj.selected[0].type) {
          canvas.getActiveObject().setControlsVisibility({
            mb: false,
            ml: false,
            mt: false,
            mr: false
          });
        }
        canvas.renderAll();
        $("form#f").hide();
        $("form#f input[type!='hidden'] , #f select, #f textarea").parent().hide();
      });

      canvas.on("selection:cleared", function() {
        canvas.renderAll();
        $("form#f").hide();
        $("form#f input[type!='hidden'], #f select, #f textarea").parent().hide();
      });

      canvas.hoverCursor = 'default';
      canvas.on('mouse:over', function(e) {
        if (e.target) {
          e.target._renderControls(canvas.contextTop, {
            hasControls: false
          })
        }
      });

      canvas.on('mouse:out', function(e) {
        canvas.clearContext(canvas.contextTop);
      });
      canvas.on('mouse:down', function(e) {
        canvas.clearContext(canvas.contextTop);
      });

      addText = function() {
        var text = new fabric.Textbox("Edit this Text", {
          name: genNextName(),
          left: canvas.getWidth() / canvas.getZoom() / 2,
          top: canvas.getHeight() / canvas.getZoom() / 2,
          width: (canvas.getWidth() / canvas.getZoom()) / 2,
          fill: "#000000",
          originX: "center",
          originY: "center",
          fontFamily: "Inter",
          fontWeight: 400,
          fontSize: 60,
          padding: 20
        });
        text.setControlsVisibility({
          mt: false,
          mb: false,
          ml: true,
          mr: true,
          tl: true,
          tr: true,
          bl: true,
          br: true
        });

        canvas.add(text);
        canvas.setActiveObject(text);
        canvas.renderAll();
      };
    })();

    function hide_mh_box() {
      canvas.remove(canvas.getItemByAttr("isBB", true));
    }

    function show_mh_box() {
      var h = parseInt($("[name=maxHeight]").val());
      var n = new fabric.Rect({
        top: canvas.getActiveObject().get('top'),
        left: canvas.getActiveObject().get('left'),
        width: canvas.getActiveObject().get('width'),
        height: h,
        originX: canvas.getActiveObject().get('originX'),
        originY: canvas.getActiveObject().get('originY'),
        angle: canvas.getActiveObject().get('angle'),
        opacity: 1,
        strokeWidth: 2,
        stroke: "#FF00FF",
        fill: "rgba(0,0,0,0)",
        evented: !1,
        isBB: true
      });
      canvas.add(n);
      canvas.renderAll();
    }

    var visited = [];

    $(document).ready(function() {

      $("input[type=color]").on("input", function() {
        $(this).parent().parent().find('input').first().val(this.value);
      });

      $("textarea, input").attr("autocomplete", "off");

      if (window !== window.parent) {
        const url = new URL(document.referrer);
        $(".isIframe").removeClass('d-none');
        $(".notIframe").hide();
      }
    });
  </script>

  <script>
    function Duplicate(name) {
      Copy(name);
    }

    function Copy(name) {
      canvas.getItemByAttr("name", name).clone(function(cloned) {
        cloned.set({
          "name": genNextName()
        })
        _clipboard = cloned;
        Paste(name);
        canvas.renderAll();
      });
    }

    function RenameLayer(name) {
      let layerObj = canvas.getItemByAttr("name", name);

      let newName = prompt("Rename Layer?", layerObj.name);

      while (checkIfNameExists(newName)) {
        alert("Your layer name: " + layerObj.name + " is NOT unique please rename your layer differently.")
        newName = prompt("Rename Layer?", layerObj.name);
      }

      layerObj.name = newName;

      canvas.renderAll();
    }

    function checkIfNameExists(newName) {
      count = 0;

      canvas.forEachObject(function(obj, i) {
        if (obj.name == newName) {
          count++;
        }
      });

      if (count > 0) {
        return true;
      } else {
        return false;
      }
    }

    function Paste(name) {
      _clipboard.clone(function(clonedObj) {
        canvas.discardActiveObject();
        clonedObj.set({
          left: clonedObj.left + 10,
          top: clonedObj.top + 10,
          evented: true,
        });
        if (clonedObj.type === 'activeSelection') {
          clonedObj.canvas = canvas;
          clonedObj.forEachObject(function(obj) {
            canvas.add(obj);
          });
          clonedObj.setCoords();
        } else {
          canvas.add(clonedObj);
        }
        _clipboard.top += 10;
        _clipboard.left += 10;
        canvas.setActiveObject(clonedObj);
        canvas.requestRenderAll();
      });
    }

    function genNextName() {
      canvas.renderAll();
      var total = canvas.getObjects().length;
      return String.fromCharCode(65 + total).toLowerCase()
    }

    fabric.Object.prototype.transparentCorners = false;
    fabric.Object.prototype.borderColor = '#5cdce4';
    fabric.Object.prototype.cornerColor = 'white';
    fabric.Object.prototype.cornerStrokeColor = 'blue';
    fabric.Object.prototype.cornerStyle = 'circle';
    fabric.Object.prototype.cornerSize = 10;
    fabric.Object.prototype.borderScaleFactor = 2;
  </script>
</body>

</html>

对我做错了什么有什么建议吗？

感谢您的回复!

最佳答案

我没有对代码进行深入调试，但由于在很多地方图层“名称”用作键值，您可以尝试在单独的 macrotask 中重命名图层(以及后续更新) , 使用 setTimeout。

代替这段代码:

layerObj.name = newName;
canvas.renderAll();

试试这段代码:

setTimeout(() => {
  layerObj.name = newName;
  canvas.renderAll();
});

使用 setTimeout 的代码示例:

<html lang="en">

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.0/font/bootstrap-icons.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">

  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      padding: 0;
      margin: 0;
    }
    
    body {
      touch-action: none;
      background-image: linear-gradient(to bottom left, rgb(214, 240, 201) 10%, rgba(255, 231, 191, 1) 80%);
      -webkit-user-select: none;
      -moz-user-select: -moz-none;
      -ms-user-select: none;
      user-select: none;
    }
    
    .input-group {
      padding: 4px;
    }
    
    .canvas-container {
      margin: 0 auto;
      width: 100%;
      overflow: hidden;
      background: url(./transparent.png);
      background-size: 15px 15px;
      box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    }
    
    .actived {
      background: #fff9a8;
    }
    
    #sortable {
      max-height: 200px;
      overflow: scroll;
    }
    
    .list-group {
      line-height: 35px;
    }
    
    .svg-icon {
      width: 1em;
      height: 1em;
    }
    
    .svg-icon path,
    .svg-icon polygon,
    .svg-icon rect {
      fill: #4691f6;
    }
    
    .svg-icon circle {
      stroke: #4691f6;
      stroke-width: 1;
    }
    
    #bkboxXX {
      background: url(transparent.png);
      border: 1px solid rgba(0, 0, 0, 0.3);
      display: inline-block;
      height: 19px;
      width: 20px;
    }
    
    .bk-btn {
      background: url(/transparent.png);
    }
    
    .fl {
      float: left;
    }
    
    .fr {
      float: right;
    }
    
    .input-group-text {
      background-color: #f4f4f4;
    }
    
    .input-group-sm>.input-group-text {
      /*
            padding: .2rem .3rem !important;
            */
    }
    
    .list-group-item {
      padding: 2px 10px;
      ;
      cursor: pointer;
    }
    
    .list-group {
      border-radius: 0;
      text-align: left;
    }
  </style>
</head>

<body>
  <div class="container-fluid h-100">
    <div class="row h-100">
      <div class="col-sm-3 border-end text-center h-100 overflow-scroll bg-light py-3">
        <div class="form-floating w-100 mb-3 tour5">
          <h6 class="mb-3">Add Element</h6>
          <button class="btn btn-outline-primary" onclick="addText();" data-toggle="tooltip" data-placement="top" title="" data-bs-original-title="Add Text" aria-label="Add Text"><i
                            class="fa fa-font"></i></button>

          <button class="btn btn-outline-primary" data-toggle="tooltip" data-placement="top" title="" onclick="  canvas.add(new fabric.Circle({ name: genNextName(), originX:'center', originY:'center',  radius: 30, fill: 'green', top: 100, left: 100 }));" data-bs-original-title="Add Circle"
            aria-label="Add Circle"><i
                            class="fa fa-circle"></i></button>
          <button class="btn btn-outline-primary" data-toggle="tooltip" data-placement="top" title="" onclick="  canvas.add(new fabric.Triangle({  name: genNextName(),  originX:'center', originY:'center', height:100, width:100, fill: 'red', top: 100, left: 100 }));"
            data-bs-original-title="Add Triangle">
                        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="triangle" role="img"
                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class=""
                            style="height: 16px;top: 9px;">
                            <path fill="currentColor"
                                d="M329.6 24c-18.4-32-64.7-32-83.2 0L6.5 440c-18.4 31.9 4.6 72 41.6 72H528c36.9 0 60-40 41.6-72l-240-416z"
                                class=""></path>
                        </svg>
                    </button>
          <button class="btn btn-outline-primary" data-toggle="tooltip" data-placement="top" title="" onclick="canvas.add(new fabric.Rect({ name: genNextName(),  originX:'center', originY:'center', left: 110, top: 110, fill: '#000', width: 50, height: 50 }))" data-bs-original-title="Add Rectangle"><i class="fa fa-square-full"></i> </button>
        </div>
        <hr>
        <div class="w-100  tour7 Xd-none Xd-sm-block">
          <h6 class="mb-3">Elements</h6>
          <ul class="list-group" id="sortable"></ul>
        </div>
      </div>
      <div class="col-sm-6 my-auto py-4 overflow-hidden">
        <div class="canvas-container" style="width: 329px; height: 329px; position: relative; user-select: none;"><canvas id="c" class="lower-canvas" width="329" height="329" style="position: absolute; width: 329px; height: 329px; left: 0px; top: 0px; touch-action: none; user-select: none;"></canvas>
        </div>
      </div>
      <div class="col-sm-3 border-start py-3 h-100 overflow-scroll bg-light text-center">
        right map
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
  <script src="https://unpkg.com/fabric@5.2.1/dist/fabric.min.js"></script>
  <script src="https://rawcdn.githack.com/lyzerk/fabric-history/8c223cbdc8305307b4a8f8710f97da54d9146ffa/src/index.js"></script>
  <script src="https://rawgit.com/fabricjs/fabric.js/master/lib/centering_guidelines.js"></script>
  <script src="https://rawgit.com/fabricjs/fabric.js/master/lib/aligning_guidelines.js"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js"></script>

  <script>
    const rgba2hex = (rgba) => `#${rgba.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+\.{0,1}\d*))?\)$/).slice(1).map((n, i) => (i === 3 ? Math.round(parseFloat(n) * 255) : parseFloat(n)).toString(16).padStart(2, '0').replace('NaN', '')).join('')}`

    function cn2h(cn) {
      if (!cn) {
        return 'transparent';
      }
      d = document.createElement("span");
      d.style.display = "none";
      d.style.color = cn
      document.body.appendChild(d)
      return rgba2hex(window.getComputedStyle(d).color);
    }
  </script>
  <script>
    var canvas;
    var apiUrl;
    var startedLoadingFamilies = false;
    var to;
    var scale;

    fabric.Text.prototype.set({
      _getNonTransformedDimensions() { // Object dimensions
        return new fabric.Point(this.width, this.height).scalarAdd(this.padding);
      },
      _calculateCurrentDimensions() { // Controls dimensions
        return fabric.util.transformPoint(this._getTransformedDimensions(), this.getViewportTransform(), true);
      }
    });

    function fitCanvas(w, h) {
      var scaleW = (document.querySelectorAll(".col-sm-6")[0].offsetWidth - 100) / w;
      var scaleH = (document.querySelectorAll("body")[0].offsetHeight - 100) / h;
      scale = Math.min(scaleH, scaleW);

      if (scale > 1) {
        scale = 1;
      }


      canvas.setZoom(scale);
      canvas.setWidth(w * scale);
      canvas.setHeight(h * scale);

      initAligningGuidelines(canvas);
      initCenteringGuidelines(canvas);

      canvas.renderAll();
      console.log("finished!!");

    }

    (function() {
      canvas = new fabric.Canvas('c', {
        allowTouchScrolling: true
      });
      WebFont.load({
        google: {
          families: ["Inter:200"]
        },
        active: function() {
          canvas.loadFromJSON({
            "height": "500",
            "width": "500",
            "edit": "yes",
            "objects": [],
            "backgroundImage": {
              "crossOrigin": "anonymous"
            }
          }, function() {
            fitCanvas(500, 500);
          })
        }
      });

      canvas.on('before:render', function(opt) {
        canvas.getObjects().map(function(o, i) {
          if (o.type.toLowerCase() == "textbox") {
            var maxH = (o.maxHeight) ? (o.maxHeight) : (canvas.height);
            o.set({
              'maxHeight': maxH
            });
            if (o.fontSize > 0 && (maxH > o.fontSize)) {
              while (o.height > maxH) {
                o.set({
                  'fontSize': o.fontSize - 1
                });
              }
            }
          }

          if (o.circleFrame) {
            o.set({
              clipPath: new fabric.Circle({
                radius: o.width / 2,
                originX: 'center',
                originY: 'center'
              })
            });

          }

          if ((o.rx || o.ry) && o.type == "image") {

            let rx = (o.rx || 0);
            let ry = (o.ry || 0);

            o.set({
              clipPath: new fabric.Rect({
                rx: rx,
                ry: ry,
                height: o.height,
                width: o.width,
                originX: 'center',
                originY: 'center'
              })
            });
          }
        });
      });
    })();
  </script>

  <script>
    fabric.Object.prototype.objectCaching = false;

    function setCanvasBG(clr) {
      canvas.backgroundColor = clr;
      canvas.renderAll();
    }

    function changeDim() {
      fitCanvas($("#widthC").val(), $("#heightC").val());
    }

    function setColor(clr, what = 'fill') {
      canvas.getActiveObject().set(what, clr);
      canvas.renderAll();
    }

    (function() {

      $(document).on("mouseenter", "[data-label]", function() {
        $("#font-search").val($(this).data("label"));
        loadFont($(this).data("label"));
      });

      fabric.Canvas.prototype.getItemByAttr = function(attr, name) {
        var object = null,
          objects = this.getObjects();
        for (var i = 0, len = this.size(); i < len; i++) {
          if (objects[i][attr] && objects[i][attr] == name) {
            object = objects[i];
            break;
          }
        }
        return object;
      };

      $("form#f").hide();

      var activeObject;

      $("#f input, #f select").on("input", function() {
        if (["height", "width", "top", "left", "strokeWidth", "charSpacing"].includes(this.name)) {
          canvas.getActiveObject().set(this.name, parseFloat(this.value)).setCoords();

        } else {
          canvas.getActiveObject().set(this.name, this.value).setCoords();
        }
        canvas.renderAll();
      });

      canvas.preserveObjectStacking = true;

      fabric.Object.prototype.toObject = (function(toObject) {
        return function() {
          return fabric.util.object.extend(toObject.call(this), {
            name: this.name,
            text: this.text,
            textAlign: this.textAlign,
            fontSize: this.fontSize,
            charSpacing: this.charSpacing,
            lineHeight: this.lineHeight,
            fontWeight: this.fontWeight,
            fontFamily: this.fontFamily,
            fontStyle: this.fontStyle,
            textBackgroundColor: this.textBackgroundColor,
            originX: this.originX,
            originY: this.originY,
            maxHeight: this.maxHeight,
            height: this.height,
            width: this.width,
            radius: this.radius,
            rx: this.rx,
            ry: this.ry,
            stroke: this.stroke,
            padding: this.padding,
            circleFrame: this.circleFrame
          });
        };
      })(fabric.Object.prototype.toObject);

      canvas.on('object:scaling', function(e) {
        if (e.target.toObject().type != "image" && e.target.toObject().type != "circle") {
          e.target.set({
            width: e.target.width * e.target.scaleX,
            height: e.target.height * e.target.scaleY,
            scaleX: 1,
            scaleY: 1
          })
        }
      });

      canvas.on('object:modified', function(opt) {
        document.body.style.cursor = 'progress';
      });

      canvas.on("after:render", function() {

        $("#sortable").empty();

        canvas.includeDefaultValues = false;
        canvas.toObject().objects.forEach(function(layer, id) {

          if (typeof layer.name !== 'undefined') {
            //console.log(id,layer.name);
            //canvas.getItemByAttr(`name`, layer.name).set({ "name": String.fromCharCode(65 + id).toLowerCase() })
            canvas.getItemByAttr(`name`, layer.name).set({
              "name": layer.name.replace(/ /g, "_")
            })
            var actived = '';
            if (canvas.getActiveObject()) {
              actived = (canvas.getActiveObject().name == layer.name) ? " actived" : "";
            }

            $("#sortable").append('<li class="list-group-item ui-sortable-handle clearfix ' + actived + '" onClick="canvas.setActiveObject(canvas.getItemByAttr(`name`,`' + layer.name + '`)); canvas.renderAll();" id=' + layer.name + '>' + layer.name + ' (' + layer.type + ')' + '<span class="fr button-group"><a class="mx-2" title="Edit" href="#" onClick="RenameLayer(`' + layer.name + '`)"><i class="fa fa-pencil-alt" aria-hidden="true"></i></a><a class="mx-2" title="Delete" href="#" onClick="if(confirm(`Are you sure?`)){canvas.remove(canvas.getItemByAttr(`name`,`' + layer.name + '`)); canvas.renderAll();}"><i class="fa fa-trash-alt" aria-hidden="true"></i></a><a class="me-2"  title="Duplicate this layer" href="#" onClick="Duplicate(`' + layer.name + '`); canvas.renderAll();"><i class="fa fa-clone" aria-hidden="true"></i></a></span></li>');
          }
        });
        document.body.style.cursor = 'default'
      });

      canvas.on("selection:created", function(obj) {
        if ("image" == obj.selected[0].type) {
          canvas.getActiveObject().setControlsVisibility({
            mb: false,
            ml: false,
            mt: false,
            mr: false
          });
        }
        $("form#f input[type!='hidden'], #f select").parent().hide();
        $("form#f").hide();
        canvas.renderAll();
      });

      canvas.on("selection:updated", function(obj) {
        if ("image" == obj.selected[0].type) {
          canvas.getActiveObject().setControlsVisibility({
            mb: false,
            ml: false,
            mt: false,
            mr: false
          });
        }
        canvas.renderAll();
        $("form#f").hide();
        $("form#f input[type!='hidden'] , #f select, #f textarea").parent().hide();
      });

      canvas.on("selection:cleared", function() {
        canvas.renderAll();
        $("form#f").hide();
        $("form#f input[type!='hidden'], #f select, #f textarea").parent().hide();
      });

      canvas.hoverCursor = 'default';
      canvas.on('mouse:over', function(e) {
        if (e.target) {
          e.target._renderControls(canvas.contextTop, {
            hasControls: false
          })
        }
      });

      canvas.on('mouse:out', function(e) {
        canvas.clearContext(canvas.contextTop);
      });
      canvas.on('mouse:down', function(e) {
        canvas.clearContext(canvas.contextTop);
      });

      addText = function() {
        var text = new fabric.Textbox("Edit this Text", {
          name: genNextName(),
          left: canvas.getWidth() / canvas.getZoom() / 2,
          top: canvas.getHeight() / canvas.getZoom() / 2,
          width: (canvas.getWidth() / canvas.getZoom()) / 2,
          fill: "#000000",
          originX: "center",
          originY: "center",
          fontFamily: "Inter",
          fontWeight: 400,
          fontSize: 60,
          padding: 20
        });
        text.setControlsVisibility({
          mt: false,
          mb: false,
          ml: true,
          mr: true,
          tl: true,
          tr: true,
          bl: true,
          br: true
        });

        canvas.add(text);
        canvas.setActiveObject(text);
        canvas.renderAll();
      };
    })();

    function hide_mh_box() {
      canvas.remove(canvas.getItemByAttr("isBB", true));
    }

    function show_mh_box() {
      var h = parseInt($("[name=maxHeight]").val());
      var n = new fabric.Rect({
        top: canvas.getActiveObject().get('top'),
        left: canvas.getActiveObject().get('left'),
        width: canvas.getActiveObject().get('width'),
        height: h,
        originX: canvas.getActiveObject().get('originX'),
        originY: canvas.getActiveObject().get('originY'),
        angle: canvas.getActiveObject().get('angle'),
        opacity: 1,
        strokeWidth: 2,
        stroke: "#FF00FF",
        fill: "rgba(0,0,0,0)",
        evented: !1,
        isBB: true
      });
      canvas.add(n);
      canvas.renderAll();
    }

    var visited = [];

    $(document).ready(function() {

      $("input[type=color]").on("input", function() {
        $(this).parent().parent().find('input').first().val(this.value);
      });

      $("textarea, input").attr("autocomplete", "off");

      if (window !== window.parent) {
        const url = new URL(document.referrer);
        $(".isIframe").removeClass('d-none');
        $(".notIframe").hide();
      }
    });
  </script>

  <script>
    function Duplicate(name) {
      Copy(name);
    }

    function Copy(name) {
      canvas.getItemByAttr("name", name).clone(function(cloned) {
        cloned.set({
          "name": genNextName()
        })
        _clipboard = cloned;
        Paste(name);
        canvas.renderAll();
      });
    }

    function RenameLayer(name) {
      let layerObj = canvas.getItemByAttr("name", name);

      let newName = prompt("Rename Layer?", layerObj.name);

      while (checkIfNameExists(newName)) {
        alert("Your layer name: " + layerObj.name + " is NOT unique please rename your layer differently.")
        newName = prompt("Rename Layer?", layerObj.name);
      }

      setTimeout(() => {
        layerObj.name = newName;
        canvas.renderAll();  
      })

    }

    function checkIfNameExists(newName) {
      count = 0;

      canvas.forEachObject(function(obj, i) {
        if (obj.name == newName) {
          count++;
        }
      });

      if (count > 0) {
        return true;
      } else {
        return false;
      }
    }

    function Paste(name) {
      _clipboard.clone(function(clonedObj) {
        canvas.discardActiveObject();
        clonedObj.set({
          left: clonedObj.left + 10,
          top: clonedObj.top + 10,
          evented: true,
        });
        if (clonedObj.type === 'activeSelection') {
          clonedObj.canvas = canvas;
          clonedObj.forEachObject(function(obj) {
            canvas.add(obj);
          });
          clonedObj.setCoords();
        } else {
          canvas.add(clonedObj);
        }
        _clipboard.top += 10;
        _clipboard.left += 10;
        canvas.setActiveObject(clonedObj);
        canvas.requestRenderAll();
      });
    }

    function genNextName() {
      canvas.renderAll();
      var total = canvas.getObjects().length;
      return String.fromCharCode(65 + total).toLowerCase()
    }

    fabric.Object.prototype.transparentCorners = false;
    fabric.Object.prototype.borderColor = '#5cdce4';
    fabric.Object.prototype.cornerColor = 'white';
    fabric.Object.prototype.cornerStrokeColor = 'blue';
    fabric.Object.prototype.cornerStyle = 'circle';
    fabric.Object.prototype.cornerSize = 10;
    fabric.Object.prototype.borderScaleFactor = 2;
  </script>
</body>

</html>

这个解决方案不是最优的。但老实说，整个代码需要认真重构。但是，也许目前这样的解决方案能够适合您。

关于javascript - 如何重命名对象并在 FabricJS 中渲染 Canvas ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/73409688/

文章推荐： python - 如何对IP地址进行数字排序

文章推荐： r - 如何修复 R 包中有关拼写错误的单词和示例时间的注释

文章推荐： python - PATCH 中的 google-cloud-storage 随机 503 错误

OpenGL:如何确定 3D(渲染)点是否被其前面的其他 3D(渲染)图元遮挡？
在我的 OpenGL 程序中，我按顺序执行以下操作: // Drawing filled polyhedrons // Drawing points using GL_POINTS // Displa
ruby-on-rails-3 - 渲染@object 和 locals vs 渲染 :partial
我想传递一个包含原始页面的局部变量，这个变量只包含一个带有值的符号。当我使用此代码时，它运行良好，可以在部分中访问 origin 变量: render :partial => "products",
JavaScript 渲染
为什么这个 HTML/脚本(来自“JavaScript Ninja 的 secret ”)不渲染？ http://jsfiddle.net/BCL54/
Django 渲染 anchor
我想在阅读完 View 后返回到特定的网页位置(跳转到页内 anchor )。换句话说，在 views.py 中，我想做类似的事情: context={'form':my_form} return r
WPF PathGeometry 渲染
我有一个包含单条折线的 PathGeometry，并以固定的间隔向该线添加一个新点(以绘制波形)。使用 Perforator 工具时，我可以看到每次向直线添加一个点时，WPF 都会将整个 PathGe
JavaScript 渲染 block
尝试了解如何消除或最小化网站上不同 JavaScript 库的渲染延迟。例如，如果我想加载来自许多社交网络的“即时”关注按钮，它们似乎会相互阻止渲染，并且您会收到令人不快的弹出窗口。 (func
渲染 3D 表面
我有以 xyz 点格式表示 3D 表面(即地震断层平面)的数据。我想创建这些表面的 3D 表示。我使用 rgl 和 akima 取得了一些成功，但是它无法真正处理可能会自行折叠或在同一 x,y 点具有
java - 渲染/更新线程同步
我正在用 Libgdx 编写一个小游戏。我有一个 Render[OpenGL] 线程，它不断对所有对象调用 render() 和一个更新线程不断对所有对象调用 update(double delta
R:渲染 xtable
我有一个 .Rmd 文件包含: ```{r, echo=FALSE, message=FALSE, results='asis'} library(xtable) print(xtable(group
javascript - HTML5 渲染
关闭。这个问题是opinion-based .它目前不接受答案。想要改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 9 年前。 Improve
ios - 渲染 MTIImage
请不要评判我，我只是在学习 Swift。最近我安装了 MetalPetal 框架，并按照说明操作: https://github.com/MetalPetal/MetalPetal#example-
javascript - Canvas 渲染
如果您尝试渲染 Canvas 宽度和高度之外的图像，计算机是否仍会尝试渲染它并使用资源来尝试渲染它？我只是想找出在尝试渲染图像之前检查图像是否在 Canvas 内是否更好。最佳答案我相信它仍然在无
html - 渲染 Safari
我在 safari 中渲染时遇到问题。在 firefox、chrome 和 IE 上。如下图所示: input.searchbox{-webkit-border-radius:10px;-moz-b
通过远程桌面进行 Java 渲染
我正在尝试通过远程桌面在 Windows7 下运行我在 RHEL7 服务器中制作的 java 程序。服务器中的所有java程序都无法通过远程桌面呈现。如果我在服务器位置访问服务器本身，它们看起来没问
PHP - LaTeX 渲染
我正处于一个新项目的设计阶段，该项目将采用数据集并将其加载到文档中，然后围绕模板呈现文档。呈现的文件可以是 CSV 数据集、PDF 营销信函、电子邮件……很多东西。数据不会是数学方程式，我只是在寻找一
reactjs - 渲染 React 嵌套组件
有没有办法在不同的 div 下渲染 React 组件的子组件？ ... ... ... ... ...
Plotly:渲染 3D 网格椭球体时的视觉伪像
使用以下代码: import numpy as np from plotly.offline import iplot, init_notebook_mode import plotly.graph_
Meteor.js onRendered & 渲染
截至最近， meteor 的所有文档都指出 onRendered是一种在模板完成渲染时获取回调的新方法。和 rendered只是为了向后兼容。但是，这似乎对我不起作用。 onRendered永远不会
symfony2 Twig 渲染，抛出异常
所以在我的基本模板中，我有:{% render "EcsCrmBundle:Module:checkClock" %} 然后我创建了 ModuleController.php ... getDoctr
javascript - 阻止 Mathjax 渲染
我正在使用 vue-mathjax 来编译我的 vue 项目中的数学方程。它正在编译第一个括号 () 之间的文本。我想防止编译括号内的字符串。在文档中我发现，对于$符号，如果我们想逃避编译，我们需要使

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何重命名对象并在 FabricJS 中渲染 Canvas ？