Rect mit Schlaganfall, ist die Hub Linie, wenn

Question

Ich habe eine Menge von dieser Seite und Mitarbeitern hilft hier bekam verkleinerten mis verwandelt, danke. Jetzt habe ich eine Frage über das Rechteck in Fabric.js mit Schlaganfall, wie ich es als eine Art Platzhalter für Bilder und Text verwendet wird, wenn ich es skaliert, die Grenzlinienbreite zu skaliert wird, denke ich, es ist ein bisschen ein Problem, wie ich will um die Randbreite nicht geändert zu behalten.

var canvas = new fabric.Canvas("c1"); 

var el = new fabric.Rect({ 
    originX: "left", 
    originY: "top", 
    left: 5, 
    top: 5, 
    stroke: "#ccc", 
    strokWidth: 1, 
    fill: 'transparent', 
    opacity: 1, 
    width: 200, 
    height: 200, 
    cornerSize: 6 
}); 

canvas.add (el); 
canvas.renderAll(); 

Siehe Beispiel hier http://jsfiddle.net/9yb46/, versuchen Sie es horizontal skalieren. Und ein Bild ist auch hier, und sehen Sie die linke Grenze und rechte Randbreite, sollte die gleiche wie oben und unten Grenze, aber nicht:

Answer 1

allererst Sie miss-typisierte den Namen des haben Immobilien in Ihrer Geige: strokWidth - e fehlen. Aber dies ist nicht die Ursache des Problems, da der Standardwert für die stroke ist 1.

Das skalierte Schlaganfall Problem ist das erwartete Verhalten und was Sie bitten, ist dies nicht tun. Wie auch immer, bevor Sie meinen Code überprüfen, lesen here und here und vielleicht etwas mehr here.

Dann diesen Code versuchen, mit Ihren Bedürfnissen zu helfen, werden diese perfekt funktionieren nur, wenn Sie das Skalenverhältnis des Rechtecks ​​halten als 1: 1 (scaleX = scaleY).

Dies ist jsfiddle:

var canvas = new fabric.Canvas("c1"); 

var el = new fabric.Rect({ 
    originX: "left", 
    originY: "top", 
    left: 5, 
    top: 5, 
    stroke: "rgb(0,0,0)", 
    strokeWidth: 1, 
    fill: 'transparent', 
    opacity: 1, 
    width: 200, 
    height: 200, 
    cornerSize: 6 
}); 

el.myCustomOptionKeepStrokeWidth = 1; 
canvas.on({ 
    'object:scaling': function(e) { 
     var obj = e.target; 
     if(obj.myCustomOptionKeepStrokeWidth){ 
      var newStrokeWidth = obj.myCustomOptionKeepStrokeWidth/((obj.scaleX + obj.scaleY)/2); 
      obj.set('strokeWidth',newStrokeWidth); 
     } 
    } 
}); 

canvas.add (el); 
canvas.renderAll(); 

Answer 2

Dies kann getan werden, damit Sie unabhängig skaliert werden kann.

In dem Skalierungsereignis die Breiten-, Höhen- und Skalierungsfaktoren überprüfen, die Höhe und Breite auf die neuen effektiven Werte einstellen und den scaleX und scaleY zurücksetzen.

Dies wird wahrscheinlich andere Dinge brechen, die mit dem Objekt skaliert sind, so dass Sie diese Attribute in ähnlicher Weise behandeln müssten.

Demo Fiddle.

var canvas = new fabric.Canvas("c1"); 

var el = new fabric.Rect({ 
    originX: "left", 
    originY: "top", 
    left: 5, 
    top: 5, 
    stroke: "rgb(0,0,0)", 
    strokeWidth: 1, 
    fill: 'transparent', 
    opacity: 1, 
    width: 200, 
    height: 200, 
    cornerSize: 6 
}); 

el.on({ 
    'scaling': function(e) { 
     var obj = this, 
      w = obj.width * obj.scaleX, 
      h = obj.height * obj.scaleY, 
      s = obj.strokeWidth; 

     obj.set({ 
      'height'  : h, 
      'width'  : w, 
      'scaleX'  : 1, 
      'scaleY'  : 1 
     }); 
    } 
}); 

canvas.add (el); 
canvas.renderAll();