如何在FabricJS中向文本框添加边框半径

时间:2019-09-10 09:56:07

标签: javascript fabricjs

我无法使用FabricJS将边框半径添加到Textbox并使其与编辑文本一起使用。

我在FabricJS中添加了一个文本框,我使用了一个片段将背景色添加到填充中。 唯一有效的方法是,我添加了一个rect并将其与Textbox分组,当我这样做时,编辑就消失了。

我为此创建了一个小提琴:

canvas = new fabric.Canvas('main-canvas', {
        allowTouchScrolling: true
    });
context = canvas.getContext("2d");
    
var textbox = new fabric.Textbox('Test', {
  left: (canvas.width - 150) / 2, // 150 is width of text box
  top: (canvas.height - 25) / 2, // 25 is height of text box
  width: 150,
  fontSize: 20,
  fontFamily: 'rubik',
  originX: 'center',
  originY: 'center',
  rx: 10,
  ry: 10,
  textAlign: 'center',
  fill: "#ffffff",
  backgroundColor: '#ffffff',
  textBackgroundColor: '#ffffff',
  padding: 10
});
        
textbox.setGradient('fill', {
      x1: -textbox.width / 2,
      y1: 0,
      x2: textbox.width / 2,
      y2: 0,
      colorStops: {
        0: "black",
        0.5: "red",
        1: "blue"
      }
});
        
textbox.setControlsVisibility({
  mt: false,
  mb: false,
  ml: false,
  mr: false,
  bl: false,
  br: false,
  tl: false,
  tr: false,
  mtr: false
});
        
textbox.set({ // enable padding background color
  _getNonTransformedDimensions(){ // Object dimensions
    return new fabric.Point(this.width, this.height).scalarAdd(this.padding);
  },
  _calculateCurrentDimensions(){ // Controls dimensions
    return fabric.util.transformPoint(this._getTransformedDimensions(), this.getViewportTransform(), true);
  }
});
textbox.borderColor = "#fff";
canvas.add(textbox).setActiveObject(textbox); 
canvas.renderAll();
body{
  background: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.js"></script>
<div id="canvas-container">
  <canvas id="main-canvas" width="300" height="300"></canvas>
</div>

我希望文本具有边框半径并能够编辑文本。

0 个答案:

没有答案