Possibilité de surcharger la zone de sélection de la boîte englobante dans l'option fabricjs - controls

Question

Ici, nous travaillons dans fabric.js avec la création d'un outil de conception. Nous avons créé une zone de sélection personnalisée pour l'objet canvas dans fabric.js. Je lis le code source dans fabric.js, il génère une boîte carrée pour la boîte englobante, mais je veux changer à ma coutume. Apparence de la zone de sélection Quelqu'un peut-il me conseiller?

Nous voulons apparence personnalisée zone de sélection.

Nous avons essayé ce code context.setLineDash() pour la zone de sélection.

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

Référez le code de Github fonctionne bien .Mais gagné `ma zone de travail.

Ici, nous avons attaché Borderdasharray création de propriété en fonction de tissu

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

Mais nous avons besoin de créer des points d'animation de danse/mouvement des points pour cette zone de sélection fabric.js. Comment peut-on créer une zone de sélection personnalisée dans fabric.js?

Answer 1

Pour animation "borderDashArray"

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

Démo: 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(); 

En fabricjs: object_interactivity.mixin.js et modifier drawBorders fonctionnent comme cette démo

Mise à jour:

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

Démo: https://jsfiddle.net/Da7SP/398/

Answer 2

Pour la personnalisation:

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. 

Pour utiliser ceci:

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