Изменить фон холста в ткани 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

О! мой плохой, я каждый раз создавал новый объект canvas, почему это произошло .. Спасибо, что указали мне в правильном направлении @sapics. На самом деле я разработчик 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

ответ

Смежные вопросы