Question

https://imgur.com/a/M1PpTiH

因此，我正在使用fabricjs文本框，并且我有一个自定义实现，该实现允许进行文本包装，同时仍允许用户调整边框的高度。问题在于文本本身的隐藏边界框与可见的可拖动对象框不匹配（例如，请参见上面的链接）。似乎只缩小了50％，但是我减小了盒子的大小。我的目标是使垂直文本溢出不超出边界框的底部。这种情况按原样发生，但缩放比例不正确，正如我所说。那么如何获取该隐藏框值以匹配可见边界框？

http://jsfiddle.net/L3xh06c5/

在这里，我正在与自定义对象实现配合使用

// initialize fabric canvas and assign to global windows object for debug
this.canvas = new fabric.Canvas("c", {
                                        selection: false,
                                        backgroundColor: '#fff',
                                        preserveObjectStacking: true,
                                        uniScaleTransform: true, });


fabric.ClueTextbox = fabric.util.createClass(fabric.Textbox, {
        type: 'cluetextbox',
         /**
         * Properties which when set cause object to change dimensions
         * @type Object
         * @private
         */
        _dimensionAffectingProps: 
fabric.IText.prototype._dimensionAffectingProps.slice(0),
    });

    var newItem = new fabric.ClueTextbox("Clue Text will appear here, with the same properties as this display text, bounded by this box... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget mauris in eros efficitur sodales vel eu lectus. Curabitur dui felis, posuere non urna at, rhoncus efficitur ipsum.")
            newItem.set({
                fontSize: 40,
                lineHeight: 1,
                charSpacing: 10,
                editable: false,
                lockUniScaling: false,
                lockScalingFlip: true,
            });
            newItem.setControlsVisibility({
                mt: false, // middle top disable
                mb: false, // midle bottom
                ml: false, // middle left
                mr: false, // middle right
            });
            newItem.on('scaling',  () => {
                var newHeight = newItem.height * newItem.scaleY;
                newItem.set({
                    width: newItem.width * newItem.scaleX,
                    scaleX: 1,
                });
                newItem.initDimensions();
                newItem.set({ height: newHeight, scaleY: 1 })
            });

             this.canvas.add(newItem);

//在此处添加代码

Answer 1

这是一个解决方案。我重写了_renderTextCommon

/**
 * fabric.js template for bug reports
 *
 * Please update the name of the jsfiddle (see Fiddle Options).
 * This templates uses latest dev verison of fabric.js (https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js).
 */

// initialize fabric canvas and assign to global windows object for debug
this.canvas = new fabric.Canvas("c", {
                                            selection: false,
                                            backgroundColor: '#fff',
                                            preserveObjectStacking: true,
                                            uniScaleTransform: true, });


fabric.ClueTextbox = fabric.util.createClass(fabric.Textbox, {
            type: 'cluetextbox',
             /**
             * Properties which when set cause object to change dimensions
             * @type Object
             * @private
             */
            _dimensionAffectingProps: fabric.IText.prototype._dimensionAffectingProps.slice(0),
            
            _renderTextCommon: function(ctx, method) {
                ctx.save();
                var lineHeights = 0, left = this._getLeftOffset(), top = this._getTopOffset(),
                    offsets = this._applyPatternGradientTransform(ctx, method === 'fillText' ? this.fill : 							this.stroke);
                for (var i = 0, len = this._textLines.length; i < len; i++) {
                  var heightOfLine = this.getHeightOfLine(i),
                      maxHeight = heightOfLine / this.lineHeight,
                      leftOffset = this._getLineLeftOffset(i);
                  if(lineHeights+heightOfLine < this.getScaledHeight()){
                  this._renderTextLine(
                    method,
                    ctx,
                    this._textLines[i],
                    left + leftOffset - offsets.offsetX,
                    top + lineHeights + maxHeight - offsets.offsetY,
                    i
                  );
                  }
                  lineHeights += heightOfLine;
                }
                ctx.restore();
              }
        });
        
        var newItem = new fabric.ClueTextbox("Clue Text will appear here, ")
                newItem.set({
                    fontSize: 40,
                    lineHeight: 1,
                    charSpacing: 10,
                    editable: false,
                    dirty:false,
                    objectCaching:false,
                    lockUniScaling: false,
                    lockScalingFlip: true,
                });
                newItem.setControlsVisibility({
                    mt: false, // middle top disable
                    mb: false, // midle bottom
                    ml: false, // middle left
                    mr: false, // middle right
                });
                newItem.on('scaling',  () => {
                    var newHeight = newItem.height * newItem.scaleY;
                    newItem.set({
                        width: newItem.width * newItem.scaleX,
                        scaleX: 1,
                    });
                    newItem.initDimensions();
                    newItem.set({ height: newHeight, scaleY: 1 })
                });
                
                 this.canvas.add(newItem);
// ADD YOUR CODE HERE

canvas {
    border: 1px solid #999;
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="600" height="600"></canvas>

如何将文本高度绑定到fabricJS文本框中的边界框

1 个答案: