Fabric.js - 更改矩形填充

嘿，我正在使用Fabric.js的應用程序工作。Fabric.js - 更改矩形填充

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

我需要能夠改變填補矩形我豎起作爲背景的。

我使用canvas.getActiveObject（）來改變矩形的填充。不幸的是，我似乎找不到一種方法來改變矩形的填充。

這裏是我的代碼：

<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>

如何改變它的任何想法？提前致謝！

來源

2012-09-10 Kalvin Klien

通過使用織物的基本組方法解決了這一問題：

backgroundColor.onchange = function() {   
      canvas.getActiveObject().set("fill", this.value); 
      canvas.renderAll(); 
     };

來源

2012-09-10 18:47:48

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"

來源

2014-07-14 08:42:50 DarkDaryl

三這容易和簡單的代碼由織物文檔

var activeObject = canvas.getActiveObject(); 
     activeObject.fill = 'your color code value'; 
     canvas.renderAll();

來源

2014-07-14 08:56:26 satyawan

Fabric.js - 更改矩形填充

回答

相關問題