Question

在应用 setOptions 功能后，FabricJS样式不会更新。基本上，我需要的是在应用setOptions时从样式中获取样式（例如FontSize）。

根据我的理解，setOptions类更新BLOCK样式，而不是线型，但我需要在文本行样式中获取它。

如果我需要获得＆＃34; RENDERED＆＃34;它是一样的。文本行的样式......

＆＃13;

var canvas = new fabric.Canvas('paper');
canvas.setHeight(300);
canvas.setWidth(500);

var text = new fabric.Textbox('Hello world', {
  left: 50,
  top: 10,
  fontFamily: 'arial',
  fill: '#333',
  fontSize: 50
});

canvas.add(text);

const style = {
	fill: 'red'
};

text.setOptions(style)

canvas.renderAll();

text.on('changed', function(){
	console.log('___Expecting to get style here with RED text color___', this.styles);
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.min.js"></script>
<canvas id="paper" width="400" height="400" style="border:1px solid #ccc"></canvas>

＆＃13;

http://jsfiddle.net/redlive/yjz6drL0/

Answer 1

因此'text：changed'或'changed'是一个事件，会触发用户的文本输入更改。

没有任何事件可以捕获dev更改，因为您将代码放置在其中，您不应该需要事件来查明它们已更改。

如果要更改为特定样式，则必须创建样式对象或使用setSelectionStyle

所以text.setOptions是初始化的通用方法，它也负责初始化渐变和模式。在这种情况下，它获得一个带有键填充的对象，它不知道它是一种样式。

var canvas = new fabric.Canvas('paper');
canvas.setHeight(300);
canvas.setWidth(500);

var text = new fabric.Textbox('Hello world', {
  left: 50,
  top: 10,
  fontFamily: 'arial',
  fill: '#333',
  fontSize: 50
});

canvas.add(text);

var data = {
  0: {
    0: {
      fill: 'red'
    },
    1: {
      stroke: 'yellow'
    },
    2: {
      textDecoration: 'underline',
    },
    3: {
      textBackgroundColor: 'pink'
    },
    7: {
      fill: 'green'
    },
  }
}

// OR if you want to change the fill for all the text you can also do:

// text.setSelectionStyles({ fill: 'red' }, 0, text.text.lenght);

text.set('styles', data);

canvas.renderAll();

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.min.js"></script>
<canvas id="paper" width="400" height="400" style="border:1px solid #ccc"></canvas>

应用setOptions函数后，FabricJS样式不会更新

1 个答案: