阴影不适用于FabricJS

时间:2016-03-15 05:06:50

标签: css fabricjs

我已经更新了FabricJS版本1.5到1.6(测试版),然后文本阴影效果现在不起作用。这是我的功能。如何解决这个问题?

$('#text-shadow-set').change(function (){
if(isText()) {
    if(this.checked) {
        var tmp = $('#text-shadow-offset-slider').slider('option','value');
        var shadVal = (tmp==''||tmp==0) ? 20 : tmp;
        currentElement.setShadow({
            color: '#000',
            blur: 5,
            offsetX: shadVal,
            offsetY: shadVal
        });
        canvas.renderAll();
    } else {
        currentElement.setShadow(null);
        canvas.renderAll();
    }
}
});

1 个答案:

答案 0 :(得分:1)

文本和阴影似乎可以正常工作。查看下面的演示:

var text = new fabric.Text('Text with Shadow', {
    left: 50,
    top: 150,
    fill: 'red',
    strokeWidth: 1,
    stroke: 'black',
});

text.setShadow({
    color: 'black',
    blur: 5,
    offsetX: 10,
    offsetY: 10,
    opacity: 0.5,
});
canvas.add(text);
canvas.renderAll();

演示

var canvas = new fabric.Canvas('c');

var text = new fabric.Text('Text with Shadow', {
	left: 50,
	top: 150,
	fill: 'red',
	strokeWidth: 1,
	stroke: 'black',
});

text.setShadow({
    color: 'black',
    blur: 5,
    offsetX: 10,
    offsetY: 10,
    opacity: 0.5,
});
canvas.add(text);
canvas.renderAll();
canvas {
  border: 1px solid #f00;
  margin: 0px;
  display: block;
}
<script src="https://rawgit.com/fabricjs/fabric.js/master/dist/fabric.min.js"></script>
<canvas id="c" width="400" height="400"></canvas>