Question

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

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

例如，我需要像图像一样的红点圆角

＆＃13;

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);

＆＃13;

<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>

＆＃13;

Answer 1

在fabricjs Polygon构造函数中似乎没有这样的选项。

然而，你可以做的是将对象的strokeLineJoin设置为'四舍五入'，应用与fill相同颜色的巨大笔划，然后缩小形状。 / p>

但是，我还没有找到合适的方法来计算缩小因子，所以我通过视图大致做了。

// the bigger, the rounder
var sW = 50;

var 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', {   
    stroke: 'black',
    strokeWidth: sW,
    scaleX : 0.7,
    scaleY : 0.7,
    strokeLineJoin : 'round',
    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: 160,
    angle: 0,
    fill: 'green',
    stroke: 'green',
    strokeWidth: sW,
    scaleX : 0.7,
    scaleY : 0.7,
    strokeLineJoin : 'round'
  }
);
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>

Answer 2

我认为你需要这样的东西

它是透明的，因为我设置fill:'transparent'，您可以将其更改为您喜欢的任何颜色。

我的例子并不完美，因为我尝试了这些属性以便将多边形移动到背景但没有成功，这些是向前/向后移动对象的属性：

canvas.sendBackwards(myObject)
canvas.sendToBack(myObject)
canvas.bringForward(myObject)
canvas.bringToFront(myObject)

关于这里的代码：

    var roof = null;
var roofPoints = [];
var lines = [];
var dots = [];  
var lineCounter = 0;
var dotsCounter = 0;
var drawingObject = {};
drawingObject.type = "";
drawingObject.background = "";
drawingObject.border = "";

function Point(x, y) {
    this.x = x;
    this.y = y;
}



$("#btnRoof").click(function () {
    if (drawingObject.type == "roof") {
        drawingObject.type = "";
        lines.forEach(function(value, index, ar){
             canvas.remove(value);
        });
        //canvas.remove(lines[lineCounter - 1]);
        roof = makeRoof(roofPoints);
        canvas.add(roof);
        canvas.renderAll();
    } else {
        drawingObject.type = "roof"; // roof type
    }
});


// canvas Drawing
var canvas = new fabric.Canvas('canvas');
var x = 0;
var y = 0;

window.addEventListener('dblclick', function(){ 
     var left = findLeftPaddingForRoof(roofPoints);
     var top = findTopPaddingForRoof(roofPoints);
        drawingObject.type = "";
        lines.forEach(function(value, index, ar){
             canvas.remove(value);
        });
        dots.forEach(function(value, index, ar){
             canvas.remove(value);
        });

        canvas.remove(lines[lineCounter - 1]);
        roof = makeRoof(roofPoints);                               

   dots.push(roof);
   var alltogetherObj = new fabric.Group(dots,{
            left:left,
            top: top,
        originX:'center',
        originY:'center'});
    canvas.add(alltogetherObj);

    canvas.renderAll();

});

canvas.on('mouse:down', function (options) {
    if (drawingObject.type == "roof") {
        canvas.selection = false;
        setStartingPoint(options); // set x,y
        roofPoints.push(new Point(x, y));
        var points = [x, y, x, y];
        lines.push(new fabric.Line(points, {
            strokeWidth: 1,
            selectable: false,
            stroke: 'red'

        }).setOriginX(x).setOriginY(y));

        canvas.add(lines[lineCounter]);
        canvas.sendToBack(lines[lineCounter]);

        lineCounter++;

         //add red dot
       dots.push(new fabric.Circle({
           selectable:false,
            left: x-5,
            top: y-5,
            centerX:'center',
            centerY:'top',
            radius: 10,
            fill: "#dd0000"
        }));

        canvas.add(dots[dotsCounter]);
        //it does not do anything here 
        canvas.bringToFront(dots[dotsCounter]);
        //it does not do anything here  either
        canvas.bringForward(dots[dotsCounter]);
        dotsCounter++;

        canvas.on('mouse:up', function (options) {
            canvas.selection = true;
        });


    }
});
canvas.on('mouse:move', function (options) {
    if (lines[0] !== null && lines[0] !== undefined && drawingObject.type == "roof") {
        setStartingPoint(options);
        lines[lineCounter - 1].set({
            x2: x,
            y2: y
        });
        canvas.renderAll();
    }
});

function setStartingPoint(options) {
    var offset = $('#canvas').offset();
    x = options.e.pageX - offset.left;
    y = options.e.pageY - offset.top;
}

function makeRoof(roofPoints) {
    var left = findLeftPaddingForRoof(roofPoints);
    var top = findTopPaddingForRoof(roofPoints);

    var roof = new fabric.Polyline(roofPoints, {
        fill: 'transparent',
        stroke:'#7F7F7F',
        sendToBack:true
    });
    roof.set({
        left: left,
        top: top
    });


    return roof;
}

function findTopPaddingForRoof(roofPoints) {
    var result = 999999;
    for (var f = 0; f < lineCounter; f++) {
        if (roofPoints[f].y < result) {
            result = roofPoints[f].y;
        }
    }
    return Math.abs(result);
}

function findLeftPaddingForRoof(roofPoints) {
    var result = 999999;
    for (var i = 0; i < lineCounter; i++) {
        if (roofPoints[i].x < result) {
            result = roofPoints[i].x;
        }
    }
    return Math.abs(result);
}

我对代码做了一些修改，因此双击时总是关闭形状。 实例（新）： http://jsfiddle.net/tornado1979/avmomzh4/

Answer 3

        add = new fabric.Rect({
            width: 200, height: 100, left: 10, top: 10, angle: 0,
            fill: 'rgba(0, 0, 0, 0)',
            stroke: '#000000',
            strokeWidth: lineWidth,
            strokeLineJoin: 'round',
            rx: 10,
            ry: 10
        });

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

3 个答案: