Fabric js：如何将圆角应用于路径&多边形

问题描述

我正在使用fabricjs app&我需要绘制一条路径&圆角的多边形形状我没有得到任何织物js参数来做这个&我也搜索但没有得到任何与我的要求匹配的结果

I am working on fabricjs app & i need to draw a path & polygon shapes with round corner I did't get any fabric js parameter to do this & I also search but didn't get any result matching with my requirement

任何人都可以形容我如何绘制路径&多边形形状与圆角详细一步一步，我需要绘制各种形状。

Can anyone describe me how draw a path & polygon shapes with round corner in detail with step by step , I need to draw various shapes.

例如 - 我需要在红点处的圆角，如图像

eg- i need round corners at red dots as in image

canvas = new fabric.Canvas('canvas');
var  path = new fabric.Path('M 170.000 210.000L 217.023 234.721 L 208.042 182.361 L 246.085 145.279 L 193.511 137.639 L 170.000 90.000 L 146.489 137.639 L 93.915 145.279 L 131.958 182.361 L 122.977 234.721 L 170.000 210.000');
path.set({ left: 120, top: 120 });
canvas.add(path);
var pol = new fabric.Polygon([
  {x: 200, y: 0},
  {x: 250, y: 50},
  {x: 250, y: 100},
  {x: 150, y: 100},
  {x: 150, y: 50} ], {
    left: 250,
    top: 150,
    angle: 0,
    fill: 'green'
  }
);
canvas.add(pol);

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id='canvas' width="500" height="400" style="border:#000 1px solid;"></canvas>

推荐答案

没有嵌入式函数可以为形状添加圆角。
您可以使用的是绘图画布属性lineJoin，可以使用 object.strokeLineJoin ='round'访问每个路径;
要有一个明显的效果你必须使用大笔画。我在这里用20来使效果可见。

There is no embedded function to add rounded corners to shapes.What you can use is the drawing canvas property "lineJoin" that is accessible for every path using object.strokeLineJoin = 'round';To have a visible effect you have to use a big stroke. i used 20 here to make the effect visible.

canvas = new fabric.Canvas('canvas');
var  path = new fabric.Path('M 170.000 210.000L 217.023 234.721 L 208.042 182.361 L 246.085 145.279 L 193.511 137.639 L 170.000 90.000 L 146.489 137.639 L 93.915 145.279 L 131.958 182.361 L 122.977 234.721 L 170.000 210.000');
path.set({ left: 120, top: 120, strokeLineJoin: 'round', strokeWidth: 20, stroke: 'black' });
canvas.add(path);
var pol = new fabric.Polygon([
  {x: 200, y: 0},
  {x: 250, y: 50},
  {x: 250, y: 100},
  {x: 150, y: 100},
  {x: 150, y: 50} ], {
    left: 250,
    top: 150,
    angle: 0,
    fill: 'green',
    strokeLineJoin: 'round',
    strokeWidth: 20,
    stroke: 'green'
  }
);
canvas.add(pol);

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id='canvas' width="500" height="400" style="border:#000 1px solid;"></canvas>

这篇关于Fabric js：如何将圆角应用于路径&多边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！