改变织物中帆布的背景JS

我想改变帆布的背景。我能够改变画布的背景，但一旦我点击背景。它重新加载原始背景并且不显示更改的背景。希望你明白我想说什么。以下是其实现改变background.Based上选择框的代码，图像将加载改变织物中帆布的背景JS

HTML

<div id="wrapper"> 
    <div class="canvas-container" style="float:left;"> 
     <canvas id="c" width="500" height="500" style="border:1px solid #ccc">  </canvas> 
    </div> 
</div> 

<select id="color" class="styled-select"> 
    <option value="red">Red</option> 
    <option value="green">Green</option> 
    <option value="purple">Purple</option> 
</select>

SCRIPT

var canvas = new fabric.Canvas('c'); 
canvas.setBackgroundImage("red.png", canvas.renderAll.bind(canvas)); 
$('select#color').on('change', function() { 
    var imageName=this.value+".png" 
    var canvas = new fabric.Canvas('c'); 
    canvas.setBackgroundImage(imageName, canvas.renderAll.bind(canvas)); 
})

来源

2015-05-19 Bhupendra Jadeja

您可以为您的问题创建一个小提琴，以便它会更好地理解！ –

如何删除第二个'var canvas = new fabric.Canvas（'c'）;'？ – sapics

哦！我的坏，我每次创建新的画布对象，为什么它发生..谢谢你指出我正确的方向@sapics。实际上，我是magento开发人员，并且采用fabric和magento来实现。 –

欢迎堆栈溢出！

您有两次var canvas = new fabric.Canvas('c');。最后删除。

要改变背景颜色，你只需要canvas.backgroundColor属性：

$('select#color').on('change', function() { 
    canvas.backgroundColor = this.value; 
    canvas.renderAll(); 
});

我创建了一个捣鼓这样：http://jsfiddle.net/q6Y6k/15/

我希望这有助于。

来源

2015-05-19 09:46:14 ptCoder

改变织物中帆布的背景JS

回答

相关问题