Überschreibbereich für Begrenzungsrahmen in fabricjs kann deaktiviert werden - Steueroption

Question

Hier arbeiten wir in fabric.js mit dem Erstellen des Entwurfswerkzeugs. Wir haben einen benutzerdefinierten Auswahlbereich für das Arbeitsflächenobjekt in fabric.js erstellt. Ich lese Quelltext in fabric.js, es erzeugt eine quadratische Box für Bounding Box, aber ich möchte meine Custom ändern. Auswahlbereich Aussehen. Kann mir bitte jemand raten?

Wir wollen individuellen Auswahlbereich Aussehen.

Wir haben diesen Code versucht context.setLineDash() für Auswahlbereich.

if (fabric.StaticCanvas.supports('setLineDash') === true) { 
    ctx.setLineDash([4, 4]); 
} 

Siehe Code aus Github .Aber für meinen Arbeitsbereich in Ordnung `t arbeiten.

Hier haben wir Borderdasharray Property Schöpfung in Gewebefunktion

fabric.Object.prototype.set({ 
     borderColor: 'green', 
     cornerColor: 'purple', 
     cornerSize: 33, 
     transparentCorners: false,padding:4, 
     borderDashArray:[50,25]   
    }); 

Aber wir brauchen angebracht animierte Tanz um Punkte erzeugen/Punkte für den Auswahlbereich in fabric.js bewegt.

Wie können wir einen benutzerdefinierten Auswahlbereich in fabric.js erstellen?

Answer 1

Für animierte "borderDashArray"

Dokumentation: https://developer.mozilla.org/fr/docs/Web/API/CanvasRenderingContext2D/lineDashOffset

Demo: https://jsfiddle.net/bp4u8tsr/

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 
var offset = 0; 

function draw() { 
  ctx.clearRect(0,0, canvas.width, canvas.height); 
  ctx.setLineDash([4, 2]); 
  ctx.lineDashOffset = -offset; 
  ctx.strokeRect(10,10, 100, 100); 
} 

function march() { 
  offset++; 
  if (offset > 16) { 
    offset = 0; 
  } 
  draw(); 
  setTimeout(march, 20); 
} 

march(); 

In fabricjs: object_interactivity.mixin.js und modifizieren funktionieren drawBorders wie diese Demo

Update:

fabric.Object.prototype.set({ 
     borderColor: 'green', 
     cornerColor: 'purple', 
     cornerSize: 33, 
     transparentCorners: false,padding:14, 
     borderDashArray:[50,25]   
    }); 
// initialize fabric canvas and assign to global windows object for debug 
var canvas = window._canvas = new fabric.Canvas('c',{width: 500, height: 500}); 
textbox = new fabric.Textbox('Hello, World!', { 
    width: 200, 
    height: 200, 
    top: 80, 
    left: 80, 
    fontSize: 50, 
    textAlign: 'center', 
}); 
canvas.add(textbox); 
textbox2 = new fabric.Textbox('Hello, World!', { 
    width: 200, 
    height: 200, 
    top: 160, 
    left: 160, 
    fontSize: 50, 
    textAlign: 'center', 
}); 
canvas.add(textbox2); 
canvas.renderAll(); 
canvas.setActiveObject(textbox); 
var offset = 0; 

    (function animate() { 
    offset++; 
    if (offset > 75) { 
     offset = 0; 
    } 
    canvas.contextContainer.lineDashOffset = -offset; 
    canvas.renderAll(); 
    fabric.util.requestAnimFrame(animate); 
    })(); 

    canvas.on('after:render', function() { 
    canvas.contextContainer.strokeStyle = 'green'; 
     canvas.contextContainer.setLineDash([50,25]); 
    canvas.forEachObject(function(obj) { 
     var bound = obj.getBoundingRect();    
     canvas.contextContainer.strokeRect(
     bound.left + 0.5, 
     bound.top + 0.5, 
     bound.width, 
     bound.height 
    ); 
    }) 
    }); 

Demo: https://jsfiddle.net/Da7SP/398/

Answer 2

Für Anpassung:

borderDashArray: Dash stroke of borders 
    cornerDashArray: Dash stroke of corners 
    cornerStrokeColor: If corners are filled, this property controls the color of the stroke 
    cornerStyle: standrd 'rect' or 'circle' 
    selectionBackgroundColor: add an opaque or transparent layer to the selected object. 

Für den Einsatz dieser:

fabric.Object.prototype.set({ 
    transparentCorners: false, 
    borderDashArray: ......