Question

我正在使用fabric js app＆amp;我尝试将阴影应用于导入的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();
});

Answer 1

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阴影功能实现得很差。

Fabric js：禁用导入SVG的笔划阴影

1 个答案: