Fabric.js getElementOffset()用法及代碼示例

Fabric.js中的getElementOffset()方法用於查找元素的偏移量。此方法返回的對象包含“top”和“left”屬性，分別表示元素的“top”和“left”偏移量。必須先選擇頁麵中的HTML元素，然後將其傳遞給此方法。

用法:

getElementOffset(element)

參數：此方法接受如上所述和以下描述的單個參數：

element:此參數用於指定必須為其找到偏移量的HTML元素。

返回值：此方法返回一個包含“top”和“left”偏移量的對象作為屬性。

下麵的示例演示了getElementOffset()方法Fabric.js：

例：

HTML


<html>
<head>
  <!-- Adding the Fabric.js library -->
  <script src=
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js">
  </script>
  <style>
    /* Define the CSS classes to be used */
    .box1 {
      width:200px;
      height:200px;
      background-color:red;
  
      position:absolute;
      top:200px;
    }
  
    .box2 {
      width:200px;
      height:200px;
      background-color:green;
  
      position:absolute;
      left:185px;
    }
  </style>
</head>
    
<body>
  <h1 style="color:green;">
    GeeksforGeeks
    </h1>
      
  <h3>
    Fabric.js util.getElementOffset() Method
    </h3>
      
  <div class="box1">
    Element 1
    </div>
      
  <div class="box2">
    Element 2
    </div>
      
  <script>
    // Select the elements to be used
    let elem = 
    document.querySelector('.box1');
    let elem2 = 
    document.querySelector('.box2');
  
    console.log("Left and Top Offsets:")
  
    // Find the offsets of the element
    console.log(
      fabric.util.getElementOffset(elem)
    );
    console.log(
      fabric.util.getElementOffset(elem2)
    );
  </script>
</body>
  
</html>

輸出：

相關用法

注：本文由純淨天空篩選整理自sayantanm19大神的英文原創作品 Fabric.js getElementOffset() Method。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。