Fatal编程技术网
  • javascript/
  • Javascript Fabric.js-更改矩形填充

Javascript Fabric.js-更改矩形填充

javascript html canvas

Javascript Fabric.js-更改矩形填充,javascript,html,canvas,fabricjs,Javascript,Html,Canvas,Fabricjs,我正在开发一个使用的应用程序 我需要能够更改作为背景的矩形的填充 我使用canvas.getActiveObject（）更改矩形的填充。不幸的是，我似乎找不到一种方法来改变矩形的填充 这是我的密码： <html> <head> <title>Text Rendering Example</title> <script src="fabric.js"></script> &l

我正在开发一个使用的应用程序

我需要能够更改作为背景的矩形的填充

我使用
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>


文本呈现示例
文件
var canvas=newfabric.canvas（'canvas'）；
var$=函数（id）{return document.getElementById（id）}；
var textArray=新数组（）；
var textControl=$（'text-control'）；
var textColor=$（'text-color'）；
var backgroundColor=$（'background-color'）；
函数addBox（）
{       
var rect=new fabric.rect({
宽度：1000，
身高：600，
排名：300，
左:500,，
填写：'rgba（51,51,51,1）'，
可拖动：错误
});
rect.lockMovementX=true；
rect.lockMovementY=true；
rect.lockUniScaling=true；
rect.lockRotation=真；
canvas.add（rect）；
}
函数addText（）
{
var content=document.boxForm.textString.value；
var color=document.boxForm.textColor.value；
text=新结构。text（内容，{
左:100,，
前100名，
填充：颜色
});
text.lockUniScaling=true；
text.lockRotation=true；
//textarayadd（text）；
canvas.add（文本）；
}
textControl.onchange=函数（）{
canvas.getActiveObject（）.setText（this.value）；
canvas.renderAll（）；
};
textColor.onchange=函数（）{
canvas.getActiveObject（）.setColor（this.value）；
canvas.renderAll（）；
};
/*----这是我更改矩形颜色的地方-----*/
backgroundColor.onchange=function（）{
canvas.getActiveObject（）.fillRect（20,100,100,50）；
canvas.renderAll（）；
};
/*----这是我更改矩形颜色的地方-----*/
/*函数textarayadd（obj）
{
textArray.push（obj）；
}*/
函数updateControl（）{
textControl.value=canvas.getActiveObject（）.getText（）；
}
帆布({
“对象：选定”：UpdateControl，
});
/*var strDataURI=canvas.toDataURL（'image/png'）；
函数saveImage（）
{           
Canvas2Image.saveAsPNG（画布）；
}*/
关于如何改变它有什么想法吗？提前谢谢

使用织物的基本设置方法修复了该问题：

backgroundColor.onchange = function() {         
    canvas.getActiveObject().set("fill", this.value);
    canvas.renderAll();
};
这是一个简单易用的代码结构文档

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

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