Fabric.js：笔画颜色和宽度svg文件在画布上的问题

我在使用我的项目fabricJS和我有问题来更改笔触颜色和宽度。我的页面上有一些SVG文件，点击后用户可以将此SVG添加到画布并修改其属性。填补它完美的作品，但与中风我不能这样做。这是补码，它是工作的好：Fabric.js：笔画颜色和宽度svg文件在画布上的问题

function setImageColor(element) 
{ 
    var activeObject = canvas.getActiveObject(), 
    color = "#"+element.value; 

    console.log(color)  
    console.log(activeObject) 
    activeObject.set({fill : color}); 
    canvas.renderAll(); 
} 

jscolor.addEventListener('change', function() 
{ 
    setImageColor(this); 
});

这里是在画布上加载SVG元素代码：

shapes.forEach(function(e) 
{ 
    e.addEventListener("click", function() 
    { 
     var src = e.src; 
     fabric.loadSVGFromURL(src, function(objects, options) 
     { 
      var obj = fabric.util.groupSVGElements(objects, options); 
      canvas.add(obj).renderAll(); 
      obj.scaleToHeight(127) 
       .scaleToWidth(90) 
       .center() 
       .setCoords(); 
      canvas.setActiveObject(obj).renderAll(); 
     }); 
    }); 
});

这里是行程的代码，它不工作：

function setStrokeColor(element) 
{ 
    color = "#"+element.value; 
    var obj = canvas.getActiveObject(); 
    console.log(color)  
    console.log(activeObject) 
    activeObject.set({stroke : color, strokeWidth: 5}); 
    canvas.renderAll(); 
} 

var stroke = document.getElementById("stroke"); 
console.log(stroke) 

stroke.addEventListener('change', function() 
{ 
    setStrokeColor(this); 
});

来源

2017-03-31 Agata

你可以添加你的SVG吗？我猜测SVG需要修改才能让你“中风”。在过去，我必须让我的图形艺术家（使用Adobe Illustrator）在导出时进行调整，以便格式不同，从而使其可以在HTML 5画布对象中更好地发挥作用 - http://graphicdesign.stackexchange.com/questions/15475 /转换原语到路径-使用-SVG格式-在插画。 –

我也使用Adobe Illustrator来创建svg文件。关于来自AI的fidlejs代码。我要制作很多形状，像飞机或花朵那样困难重重。 https://jsfiddle.net/ck75a2r3/ – Agata

HTML 5 Canvas可能不喜欢Circle，尝试从Adobe导出为路径... http://graphicdesign.stackexchange.com/questions/15475/convert-primitive-to-path-使用svg格式的插画 –

这应该这样做（感谢SVG路径出口）：

这里的FabricJS代码：

fabric.loadSVGFromString('<svg id="Warstwa_1" data-name="Warstwa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70"><defs><style>.cls-1{fill:none;stroke:#000;stroke-miterlimit:10;}</style></defs><title>generator ikon</title><path class="cls-1" d="M60,35A25,25,0,1,1,35,10,25,25,0,0,1,60,35Z"/></svg>', function(objects, options) { 
    var shape = fabric.util.groupSVGElements(objects, options); 
    shape.set({ 
    left: 50, 
    top: 50, 
    scaleX: 3, 
    scaleY: 3 
    }); 
    if (shape.paths) { 
    for (var i = 0; i < shape.paths.length; i++) { 
     shape.paths[i].set({ 
     fill: 'red', 
     stroke: 'green', 
     strokeWidth: 5 
     }); 
    } 
    } 
    object = shape; 
    canvas.add(shape); 
    canvas.renderAll(); 
}); 
var switchColors = true; 
document.getElementsByTagName("button")[0].addEventListener('click', function() { 
    if (object.paths) { 
    for (var i = 0; i < object.paths.length; i++) { 
     object.paths[i].set({ 
     fill: (switchColors ? 'green' : 'red'), 
     stroke: (switchColors ? 'red' : 'green'), 
     strokeWidth: (switchColors ? 10 : 5) 
     }); 
    } 
    } 
    switchColors = !switchColors; 
    canvas.renderAll(); 
});

这里是所有重要的jsfiddle，https://jsfiddle.net/rekrah/wg2qxc8e/。

让我知道你是否有任何问题。我希望它有帮助！

来源

2017-03-31 19:37:02

现在可以使用了！非常感谢你！ – Agata

不用担心，当我改变加载到HTML 5 Canvas和使用FabricJS的SVG时，我不得不通过相同的特性。如果你很乐意将我的回答标记为对下一个人“有帮助”和/或“接受”，那就太棒了。随意发布任何其他问题，我可以尝试进一步帮助。 –

Fabric.js：笔画颜色和宽度svg文件在画布上的问题

回答

相关问题