FabricJSの光学式の外観

私はファブリックjsを使用したプロジェクトに取り組んでいます。私は自分の問題を最小限に抑えようとしたので、コードがあまりにもうんざりしていないことを願っています。私は相互にリンクされているいくつかのオブジェクトを作成しています：スタートと1つのラインのStartPointのと別のラインの終点あるエンドポイント FabricJSの光学式の外観

Aサークルが含まれてい

Aラインを、

この組み合わせでは、（ポリゴンのような）さまざまな図形を作成し、それらの移動機能を変更することもできます。

円をドラッグすると、関連する線がスケーリングされ、移動しています。（私のコードでは、行を移動することもできますし、形はそれ以降にサイズが変更されますが、私はこの例に入れませんでした。このショート抽出は、私の問題が何であるかを示すのに十分でなければなりません）。

jsfiddleの例：https://jsfiddle.net/bxgox7cr/

あなたは線の端部を見ると、あなたがカットをはっきりと見ることができるので、すぐに眼が、これが接続されている形状ではなく、それぞれに接近しているいくつかの行ではないことを、認識しその他。シェイプが「閉じた」ように見える線の外観を変更する方法はありますか？ここで

は私コードで、私は読みやすいことを、いくつかのコメントを入れてみました：

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

fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center'; 
document.getElementById("canvas").tabIndex = 1000; 

/** ------------creating a Line Object, which contains a start and an endpoint ------------**/ 
fabric.LineWithPoints = fabric.util.createClass(fabric.Line, { 
    initialize: function(points, options) { 
    options || (options = {}); 
    this.callSuper('initialize', points, options); 
    options && 
     this.set('type', options.type), 
     this.set('name', options.name), 
     this.set('start_point', options.start_point), 
     this.set('end_point', options.end_point), 
     this.set('current_x', options.current_x), 
     this.set('current_y', options.current_y) 
    }, 
    setStartPointAndEndPoint: function(start_point, end_point) { 
    this.set({ 
     start_point: start_point, 
     end_point: end_point 
    }); 
    }, 
    setValues: function(new_x1, new_y1, new_x2, new_y2) { 
    //  console.log(this); 
    this.set({ 
     x1: new_x1, 
     x2: new_x2, 
     y1: new_y1, 
     y2: new_y2 
    }); 
    this.setCoords(); 
    } 
}); 

/**--- modifie the circle element, adding new functions for the movement of the object-------*/ 
fabric.LinePoint = fabric.util.createClass(fabric.Circle, { 
    initialize: function(options) { 
    options || (options = {}); 
    this.callSuper('initialize', options); 
    options && 
     this.set('subtype', 'line_point'), 
     this.set('x', this.left), 
     this.set('y', this.top) 
    }, 
    setPointCoordinates: function(new_left, new_top) { 
    this.set({ 
     x: new_left, 
     y: new_top, 
     left: new_left, 
     top: new_top 
    }); 
    this.setCoords(); 
    }, 
    move: function(new_left, new_top) { 
    var wall_1 = this.line1; 
    var wall_2 = this.line2; 

    this.setPointCoordinates(new_left, new_top); 
    wall_1.setValues(wall_1.x1, wall_1.y1, this.getLeft(), this.getTop()); 
    wall_2.setValues(this.getLeft(), this.getTop(), wall_2.x2, wall_2.y2); 
    canvas.renderAll(); 
    }, 
}); 

/**------------------- Moving Function------------------------------------------------- */ 

canvas.on('object:moving', function(event) { 
    var object = event.target; 

    if (object.subtype == "line_point") { 
    object.move(object.getLeft(), object.getTop()); 
    } 
}); 


/**------------------------------ create functions for the objects -----------------------*/ 

function newCircleObject(left, top, wall_1, wall_2) { 
    var circle = new fabric.LinePoint({ 
    left: left, 
    top: top, 
    strokeWidth: 2, 
    radius: 15, 
    fill: 'grey', 
    stroke: 'black', 
    opacity: 0.1, 
    perPixelTargetFind: true, 
    subtype: 'line_point', 
    includeDefaultValues: false 
    }); 

    circle.hasControls = false; 
    circle.hasBorders = false; 
    circle.line1 = wall_1; 
    circle.line2 = wall_2; 

    return circle; 
} 

function newWallObject(coords) { 
    var wall = new fabric.LineWithPoints(coords, { 
    stroke: 'black', 
    strokeWidth: 6, 
    lockScalingX: true, 
    lockScalingY: true, 
    perPixelTargetFind: true, 
    subtype: 'line', 
    type: 'line', 
    padding: 10, 
    includeDefaultValues: false 
    }); 

    wall.hasControls = false; 
    wall.hasBorders = false; 
    return wall; 
} 


/**------------------------------ adding the shapes--------------------------------*/ 

var wall_1 = newWallObject([100, 100, 100, 500]); 
var wall_2 = newWallObject([100, 500, 500, 500]); 
var wall_3 = newWallObject([500, 500, 500, 100]); 
var wall_4 = newWallObject([500, 100, 100, 100]); 

var end_point_1 = newCircleObject(wall_1.x1, wall_1.y1, wall_4, wall_1); 
var end_point_2 = newCircleObject(wall_2.x1, wall_2.y1, wall_1, wall_2); 
var end_point_3 = newCircleObject(wall_3.x1, wall_3.y1, wall_2, wall_3); 
var end_point_4 = newCircleObject(wall_4.x1, wall_4.y1, wall_3, wall_4); 

wall_1.setStartPointAndEndPoint(end_point_1.name, end_point_2.name); 
wall_2.setStartPointAndEndPoint(end_point_2.name, end_point_3.name); 
wall_3.setStartPointAndEndPoint(end_point_3.name, end_point_4.name); 
wall_4.setStartPointAndEndPoint(end_point_4.name, end_point_1.name); 

canvas.add(wall_1, wall_2, wall_3, wall_4, end_point_1, end_point_2, end_point_3, end_point_4);

出典

2017-01-24 Sophie D

はstrokeLineCap: 'round',を追加します。

function newWallObject(coords) { 
    var wall = new fabric.LineWithPoints(coords, { 
    stroke: 'black', 
    strokeWidth: 6, 
    lockScalingX: true, 
    lockScalingY: true, 
    perPixelTargetFind: true, 
    strokeLineCap: 'round', 
    subtype: 'line', 
    type: 'line', 
    padding: 10, 
    includeDefaultValues: false 
    }); 

    wall.hasControls = false; 
    wall.hasBorders = false; 
    return wall; 
}

私が見上げ：http://fabricjs.com/docs/fabric.Object.html#strokeLineCap

出典

2017-01-24 14:26:34

FabricJSの光学式の外観

答えて

関連する問題