Fabric.js - Changement Rectangle De Remplissage

Hé les gars, je suis en train de travailler sur une application qui utilise Fabric.js.

Fabric.js API:
http://fabricjs.com/docs/symbols/fabric.Object.html

J'ai besoin d'être en mesure de changer le remplir de la rectangle que j'ai mis comme fond.

Je utiliser de la toile.getActiveObject() pour modifier le remplissage du rectangle. Malheureusement je ne peux pas l'air de trouver une méthode qui permettra de changer le Remplissage du rectangle.

Voici mon code:

<html>
<head>
<title>Text Rendering Example</title>
<script src="fabric.js"></script>  
<script src="canvas2image.js"></script>
<script src="base64.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
</head>
<body>
<canvas id="canvas" width="1000" height="600" style="border:1px solid #000000"></canvas>
<form name = "boxForm" onsubmit="addBox()">
Width: <input type="text" name="firstname" /><br />
Text: <input id="text-control" type="text" name="textString" />
Text Color: <input id="text-color" type="text" value = "#FF0000" name="textColor" />
Background Color: <input id="background-color" type="text" value = "#333333" name="backgroundColor" />
</form> 
<button onclick="addBox()">Background</button>
<button onclick="addText()">Add Text</button>
<!--button onclick="updateControls()">Edit Text</button-->
<button onclick="saveImage()">File</button>
<script type="text/javascript" >
var canvas = new fabric.Canvas('canvas');       
var $ = function(id){return document.getElementById(id)};
var textArray = new Array();
var textControl = $('text-control');        
var textColor = $('text-color');
var backgroundColor = $('background-color');
function addBox()
{       
var rect = new fabric.Rect({
width: 1000,
height: 600,
top: 300,
left: 500,
fill: 'rgba(51,51,51,1)',
draggable: false
});
rect.lockMovementX = true;
rect.lockMovementY = true; 
rect.lockUniScaling = true; 
rect.lockRotation = true; 
canvas.add(rect);
}
function addText()
{
var content = document.boxForm.textString.value;
var color = document.boxForm.textColor.value;
text = new fabric.Text(content, {               
left: 100, 
top: 100,
fill: color
});
text.lockUniScaling = true; 
text.lockRotation = true;
//textArrayAdd(text);   
canvas.add(text);
}
textControl.onchange = function() {
canvas.getActiveObject().setText(this.value);
canvas.renderAll();
};
textColor.onchange = function() {
canvas.getActiveObject().setColor(this.value);
canvas.renderAll();
};
/*----This is where I change the color of the Rectangle-----*/
backgroundColor.onchange = function() {         
canvas.getActiveObject().fillRect( 20, 100, 100, 50 );
canvas.renderAll();
};
/*----This is where I change the color of the Rectangle-----*/
/*function textArrayAdd(obj)
{
textArray.push(obj);
}*/
function updateControls() {         
textControl.value = canvas.getActiveObject().getText();
}
canvas.on({
'object:selected': updateControls,
});
/*var strDataURI = canvas.toDataURL('image/png'); 
function saveImage()
{           
Canvas2Image.saveAsPNG(canvas); 
}*/
</script>
</body>
</html>

Des idées sur comment le changer? Merci à l'avance!

InformationsquelleAutor Kalvin Klien | 2012-09-10
  1. 16

    Résolu le problème en utilisant la méthode de jeu de tissu:

    backgroundColor.onchange = function() {         
canvas.getActiveObject().set("fill", this.value);
canvas.renderAll();
};
    InformationsquelleAutor Kalvin Klien
  2. 1

    tri ce le facile et simple code par les tissus de la documentation

    var activeObject = canvas.getActiveObject();
activeObject.fill = 'your color code value';
canvas.renderAll();
    InformationsquelleAutor satyawan
  3. 0
     function addBox()
{       
var rect = new fabric.Rect({
width: 1000,
height: 600,
top: 300,
left: 500,
fill: ' ',
draggable: false
});
rect.lockMovementX = true;
rect.lockMovementY = true; 
rect.lockUniScaling = true; 
rect.lockRotation = true; 
canvas.add(rect);
}
make your fill null and if you want to have a border 
use strokeWidth: 3, stroke: "color"
    InformationsquelleAutor DarkDaryl