Fabric.js路径TransparentCorners属性

在Fabric.js中，路径对象是表示由线条和曲线组成的任意形状的一个类。该对象有许多属性和方法可以控制路径的外观和行为。其中一个属性是TransparentCorners，本文将介绍它的作用和使用方法。

TransparentCorners属性

TransparentCorners属性是指路径对象的角部缩略图（矩形点）是否透明。当该属性设置为true时，矩形点将是半透明的，当该属性设置为false时，矩形点将是不透明的。默认值为true。

使用方法

在创建路径对象时，可以设置TransparentCorners属性来控制路径对象的角部缩略图是否透明。例如：

var path = new fabric.Path('M 0 0 L 200 100 L 100 200 z', {
  fill: 'red',
  stroke: 'green',
  strokeWidth: 5,
  transparentCorners: true //设置路径对象的角部缩略图为半透明的
});

还可以在创建路径对象后，直接使用set方法来修改其TransparentCorners属性，例如：

path.set({
  transparentCorners: false //将路径对象的角部缩略图设为不透明的
});

实例演示

以下是一个简单的实例，展示了如何使用TransparentCorners属性：

var canvas = new fabric.Canvas('canvas');

var path = new fabric.Path('M 0 0 L 200 100 L 100 200 z', {
  fill: 'red',
  stroke: 'green',
  strokeWidth: 5,
  transparentCorners: true //设置路径对象的角部缩略图为半透明的
});

canvas.add(path);

//点击按钮修改透明度
$('button').on('click', function() {
  path.set({
    transparentCorners: !path.transparentCorners //修改路径对象的TransparentCorners属性
  });
  canvas.renderAll();
});

点击运行按钮后，就可以在canvas中看到一个三角形，其角部缩略图为半透明的。点击修改透明度按钮，就可以看到矩形点逐渐从半透明变成不透明，再从不透明变成半透明。

修改透明度

var canvas = new fabric.Canvas('canvas');

var path = new fabric.Path('M 0 0 L 200 100 L 100 200 z', {
  fill: 'red',
  stroke: 'green',
  strokeWidth: 5,
  transparentCorners: true //设置路径对象的角部缩略图为半透明的
});

canvas.add(path);

//点击按钮修改透明度
$('button').on('click', function() {
  path.set({
    transparentCorners: !path.transparentCorners //修改路径对象的TransparentCorners属性
  });
  canvas.renderAll();
});