Fabric.js getScrollLeftTop() 方法

Fabric.js getScrollLeftTop() 方法

在Fabric.js中,getScrollLeftTop()方法用于查找元素的滚动偏移量。该方法返回的对象包含”top”和”left”属性,分别表示”top”和”left”的偏移量。在传递该方法之前,首先必须选择页面中的HTML元素。

语法:

getScrollLeftTop(element)

参数: 此方法接受一个参数,如上所述,并如下所述进行描述:

  • element: 此参数用于指定要查找滚动偏移量的HTML元素。

返回值: 该方法返回一个包含“top”和“left”滚动偏移量属性的对象。

下面的示例演示了使用Fabric.js中的 getScrollLeftTop() 方法:

示例:

<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 { 
            margin: 25px; 
            width: 400px; 
            height: 400px; 
            background-color: red; 
        } 
  
        .box2 { 
            margin: 25px; 
            width: 700px; 
            height: 300px; 
            background-color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3> 
        Fabric.js util.getScrollLeftTop() 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'); 
  
        function getScrollOffsets() { 
            console.clear(); 
            console.log( 
                "Current Left and Top Offsets are:" 
            ); 
  
            // Find the scrolled left and top offsets 
            console.log( 
                fabric.util.getScrollLeftTop(elem) 
            ); 
            console.log( 
                fabric.util.getScrollLeftTop(elem2) 
            ); 
        } 
  
        // Repeatedly call the function 
        // to observe the values 
        setInterval(getScrollOffsets, 1000); 
    </script> 
</body> 
  
</html>

输出结果:

Fabric.js getScrollLeftTop() 方法

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程