Fabric.js - 更改矩形填充
Posted
技术标签:
【中文标题】Fabric.js - 更改矩形填充【英文标题】：Fabric.js - Change Rectangle Fill 【发布时间】：2012-09-03 14:28:42 【问题描述】：我正在开发一个使用 Fabric.js 的应用程序。
我需要能够更改作为背景放置的矩形的填充。
我使用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" 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>
关于如何改变它的任何想法？提前致谢！
【问题讨论】：
【参考方案1】：使用fabric的基本设置方法解决了这个问题：
backgroundColor.onchange = function()
canvas.getActiveObject().set("fill", this.value);
canvas.renderAll();
;
【讨论】：
【参考方案2】：通过 fabrics 文档编写这个简单易用的代码
var activeObject = canvas.getActiveObject();
activeObject.fill = 'your color code value';
canvas.renderAll();
【讨论】：
【参考方案3】： 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"
【讨论】：
以上是关于Fabric.js - 更改矩形填充的主要内容，如果未能解决你的问题，请参考以下文章
Fabric.js - 带有免费矩形边界框的文本，如 Google 幻灯片
Fabric JS 2.4.1 ClipPath Crop 不适用于动态创建的矩形蒙版
Fabric.js Canvas - 使一种对象始终位于另一种对象下方