我正在使用fabric js app&我尝试将阴影应用于导入的SVG而没有笔划阴影
当我向SVG应用阴影时,阴影也应用于svg的笔划,但我不想要这个
在此先感谢您的帮助
我试过的代码是
;params: string in r1, function in r2
Filter:
;do stuff
ret
IsCharGood:
;decide if char is good
ret
main:
mov r1, theString
mov r2, IsCharGood
call Filter
canvas = new fabric.Canvas('canvas');
var shadow = {
color: 'rgba(0,0,0,0.6)',
blur: 20,
offsetX: 10,
offsetY: 10,
opacity: 0.6,
fillShadow: true,
strokeShadow: false
}
var s = '<svg width="100" height="100"><polygon points="30 0, 70 0, 99 33, 99 66, 70 99, 30 99, 0 66, 0 33" fill="#bbb"/></svg>'
fabric.loadSVGFromString(s, function(objects, options) {
var shape = fabric.util.groupSVGElements(objects, options);
//shape.setShadow("10px 10px 5px rgba(94, 128, 191, 0.5)");
if (shape.isSameColor && shape.isSameColor() || !shape.paths) {
console.log('shape');
shape.set({
strokeWidth: 3,
stroke: '#000'
});
}
if (shape.paths) {
console.log('shape path');
/*for (i in shape.paths) {
shape.paths[i].set({
strokeWidth: strokewidth,
stroke: strokecolor
});
}*/
allObjects = shape.paths;
$.each(allObjects, function(key, value) {
value.set({
strokeWidth: 3,
stroke: '#000'
});
});
}
//shape.setShadow("10px 10px 5px rgba(94, 128, 191, 0.5)");
shape.setShadow(shadow);
canvas.add(shape).renderAll();
});
答案 0 :(得分:3)
canvas = new fabric.Canvas('canvas');
var shadow = {
color: 'rgba(0,0,0,0.6)',
blur: 20,
offsetX: 10,
offsetY: 10,
opacity: 0.6,
affectStroke: false
}
var s = '<svg width="100" height="100"><polygon points="30 0, 70 0, 99 33, 99 66, 70 99, 30 99, 0 66, 0 33" fill="#bbb"/></svg>'
fabric.loadSVGFromString(s, function(objects, options) {
var shape = fabric.util.groupSVGElements(objects, options);
if (shape.paths) {
allObjects = shape.paths;
$.each(allObjects, function(key, value) {
value.set({
shadow: shadow,
strokeWidth: 3,
stroke: '#000',
});
value.shadow.affectStroke = false;
});
}
canvas.add(shape).renderAll();
});
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id='canvas' width="500" height="400" style="border:#000 1px solid;"></canvas>
我对您的代码进行了优化,以便仅在路径上应用阴影而不是路径组。对于shadow.affectStroke = false
无法处理路径组的问题,这可能是一个错误,或者只是fabric.PathGroup阴影功能实现得很差。