以不透明度显示外部元素部分 - Fabric js -controlsAboveOverlay

问题描述 投票：0回答：1

controlsAboveOverlay是Fabric.js中的一个属性。它是一个布尔值，当设置为 true 时，在覆盖图像上方渲染对象的控件（边框、角等）。覆盖图像是可以设置为显示在画布顶部的图像。

目前，它给出以下结果。外部部分有

仅控制。

enter image description here

我想以 0.5 的不透明度显示

元素的外部部分。就像下面这样。

enter image description here

这里是示例 HTML 代码。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Fabric.js Example with controlsAboveOverlay</title> <!-- Importing the Fabric.js library --> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.3.1/fabric.min.js"></script> </head> <body> <!-- Creating a canvas element with id 'canvas' --> <canvas id="canvas" width="400" height="400"></canvas> <style> .canvas-container { /* Setting the background color of the canvas container */ background-color: #f0f0f0; } </style> <script> (function () { /* Initializing a new Fabric.js canvas with certain properties */ var canvas = new fabric.Canvas("canvas", { width: 600, height: 500, backgroundColor: "#ffffff", /* Setting controlsAboveOverlay to true to render controls above the overlay image */ controlsAboveOverlay: true, }); /* Creating a rectangular clip path */ var clipPath = new fabric.Rect({ width: 300, height: 300, left: (canvas.getWidth() - 300) / 2, top: 10, }); /* Creating a group of objects, in this case, a single rectangle */ var group = new fabric.Group([ new fabric.Rect({ width: 100, height: 100, fill: "red", left: (canvas.getWidth() - 150) / 2, top: 10, }), ]); /* Applying the clip path to the canvas */ canvas.clipPath = clipPath; /* Adding the group of objects to the canvas */ canvas.add(group); })(); </script> </body> </html>





    



    
    javascript
    
    html
    
    css
    
    fabricjs
    
    
1个回答

    

      
      
      

        

          

            

              
0
投票

              
            

          

        

        
不错的选择


使用 SVG 剪贴蒙版绘制路径






    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Fabric.js Example with controlsAboveOverlay</title>
    <!-- Importing the Fabric.js library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.3.1/fabric.min.js"></script>
  </head>
  <body>
    <!-- Creating a canvas element with id 'canvas' -->
    <canvas id="canvas" width="400" height="400"></canvas>
    <style>
      .canvas-container {
        /* Setting the background color of the canvas container */
        background-color: #f0f0f0;
      }
    </style>
    <script>
      (function () {
        /* Initializing a new Fabric.js canvas with certain properties */
        var canvas = new fabric.Canvas("canvas", {
          width: 600,
          height: 600,
          backgroundColor: "#ffffff",
          /* Setting preserveOjectStacking to prevent othe object to stack over the overlay  */
          preserveObjectStacking: true,
        });

        var top = 150; // origin of the inner clipping rectangle y
        var left = 150; // origin of the inner clipping rectangle x

        var canvasPadding = 2000; // padding for the canvas
        var paddingHalf = canvasPadding / 2; // half of the padding
        var viewWidth = 300; // width of the inner clipping rectangle
        var viewHeight = 300;   // height of the inner clipping rectangle

        /* Creating a SVG mask for the canvas */

        var maskPath = `M 0 0 L ${canvasPadding} 0 L ${canvasPadding} ${canvasPadding} L 0 ${canvasPadding} L0 0 Z
          M ${paddingHalf + top} ${paddingHalf + top}
          L ${paddingHalf + left} ${paddingHalf + top + viewHeight}
          L ${paddingHalf + left + viewWidth} ${paddingHalf + top + viewHeight}
          L ${paddingHalf + left + viewWidth} ${paddingHalf + top}
          L ${paddingHalf + left} ${paddingHalf + top} Z
        `;

        var mask = new fabric.Path(maskPath, {
          fill: "rgba(0, 0, 0)",
          opacity: 0.5,
          left: -paddingHalf,
          top: -paddingHalf,
          selectable: false,
          evented: false,
        });

        /* Creating a group of objects, in this case, a single rectangle */
        var group = new fabric.Group([
          new fabric.Rect({
            top: 0,
            left: 0,
            width: 100,
            height: 100,
            fill: "red",
            left: (canvas.getWidth() - 150) / 2,
            top: 10,
          }),
        ]);

        /* Adding the group of objects to the canvas */
        canvas.add(group);
        canvas.add(mask);
      })();
    </script>
    </body>
   </html>





    



      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.