फैब्रिकज ऑब्जेक्ट को स्केल कैसे करें लेकिन सीमा (स्ट्रोक) चौड़ाई को स्थिर रखें

Question

मैं fabricjs के आधार पर एक आरेख उपकरण विकसित कर रहा हूं। हमारे उपकरण का आकार का अपना संग्रह है, जो svg आधारित है। मेरी समस्या यह है कि जब मैं ऑब्जेक्ट को स्केल करता हूं, सीमा (स्ट्रोक) स्केल भी। मेरा सवाल है: मैं वस्तु को कैसे स्केल कर सकता हूं लेकिन स्ट्रोक चौड़ाई को स्थिर रखता हूं। कृपया संलग्नक की जांच करें।

आपको बहुत बहुत धन्यवाद!

Answer 1

यहां एक आसान उदाहरण है जहां किसी ऑब्जेक्ट के पैमाने पर हम मूल स्ट्रोक का संदर्भ रखते हैं और पैमाने पर आधारित एक नए स्ट्रोक की गणना करते हैं।

var canvas = new fabric.Canvas('c', { selection: false, preserveObjectStacking:true }); 
 
window.canvas = canvas; 
 
canvas.add(new fabric.Rect({ 
 
    left: 100, 
 
    top: 100, 
 
    width: 50, 
 
    height: 50, 
 
    fill: '#faa', 
 
    originX: 'left', 
 
    originY: 'top', 
 
    stroke: "#000", 
 
    strokeWidth: 1, 
 
    centeredRotation: true 
 
})); 
 

 
canvas.on('object:scaling', (e) => { 
 
\t var o = e.target; 
 
\t if (!o.strokeWidthUnscaled && o.strokeWidth) { 
 
    \t o.strokeWidthUnscaled = o.strokeWidth; 
 
    } 
 
\t if (o.strokeWidthUnscaled) { 
 
    \t o.strokeWidth = o.strokeWidthUnscaled/o.scaleX; 
 
    } 
 
})

canvas { 
 
    border: 1px solid #ccc; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.min.js"></script> 
 
<canvas id="c" width="600" height="600"></canvas>

Answer 2

मैं पाया है क्या एक और भी बेहतर समाधान की तरह लगता है, एसवीजी पथ के साथ वास्तव में अच्छी तरह से काम करता है।

आप कपड़े के _renderStroke विधि को ओवरराइड कर सकते हैं और नीचे दिखाए गए ctx.stroke(); से पहले ctx.scale(1/this.scaleX, 1/this.scaleY); जोड़ सकते हैं।

fabric.Object.prototype._renderStroke = function(ctx) { 
    if (!this.stroke || this.strokeWidth === 0) { 
     return; 
    } 
    if (this.shadow && !this.shadow.affectStroke) { 
     this._removeShadow(ctx); 
    } 
    ctx.save(); 
    ctx.scale(1/this.scaleX, 1/this.scaleY); 
    this._setLineDash(ctx, this.strokeDashArray, this._renderDashedStroke); 
    this._applyPatternGradientTransform(ctx, this.stroke); 
    ctx.stroke(); 
    ctx.restore(); 
}; 

तुम भी आकार में फ़र्क के अनुसार सीमांकन बॉक्स को समायोजित करने के fabric.Object.prototype._getTransformedDimensions ओवरराइड करने के लिए आवश्यकता हो सकती है।

इसके अलावा एक और पूर्ण कार्यान्वयन संभवत: दोनों ओवरराइड विधियों के लिए इस परिवर्तन को सशर्त रूप से नियंत्रित करने के लिए एक कपड़े वस्तु संपत्ति जोड़ देगा।