个人中心
文章发布
退出
作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
24
4
我正在开发一个使用 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" 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>
关于如何更改它的任何想法？提前致谢!
最佳答案
使用fabric的基本set方法解决了这个问题:
backgroundColor.onchange = function() {
canvas.getActiveObject().set("fill", this.value);
canvas.renderAll();
};
关于javascript - Fabric.js - 更改矩形填充，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12356493/
24
4
0
我刚刚偶然发现Fabric并且文档并没有真正说明它是如何工作的。 我有根据的猜测是您需要在客户端和服务器端都安装它。 Python 代码存储在客户端，并在命令运行时通过 Fabric 的有线协议(pr
以下是我对 Hyperledger Fabric 系统的理解。如果有任何不正确的地方，请告诉我。 1) 所以我们有同行(背书人、 anchor 人、将军(拥有分类帐的人)、排序人)。此外，当我们设置结
我部署了一个持久性级别为 Silver 的全新 Service Fabric 集群，fabric:/System/InfrastructureService/FE 服务运行状况不佳，并出现以下错误:
我对使用 Fabric 很感兴趣，api 在未连接到互联网时如何工作？ 我发现 firebase(与此工具类似的工具)会将数据存储在本地，然后对服务器进行批量更新。但是，超过 72 小时的任何内容都不
Fabric CA Server 和 Fabric CA Client 的功能是什么？ Fabric CA 服务器和 Fabric CA 客户端的角色是什么？ 谢谢 最佳答案 Fabric CA 提供
我想在不同的环境中使用相同的应用程序，我在 documentation 中找到了它, Apps with Multiple Environments Let’s say you have an app
我目前正在尝试学习 Hyperledger Fabric，我设法了解了如何设置网络(Orderer、Peers 等)，但现在是链代码的一部分。 但是，我发现两个不同的 git 存储库(据我所知)可用于
我在 following this tutorial 时遇到错误 cannot convert from 'System.Fabric.StatelessServiceContext' to 'Sys
在我没有改变任何东西之前它可以工作，但今天我收到了这个错误，这里是我的 gradle buildscript { repositories { mavenCentral() maven
Fabric beta 手动分发有时不会发送邀请电子邮件，即使在它向该人显示“已邀请”的网页中也是如此。如果我点击重新发送邀请，那个人就会收到。我的 QA 团队人员必须一直来找我重新发送邀请。我知道
默认情况下，Hyperledger Fabric 在将许多证书保存到区 block 链之前将其存储在交易中。无论如何或任何想法/技术来最小化区 block 链中的交易大小？ 任何想法都非常有用! 最佳
我是 Hyperledger Fabric 的新手。我正在阅读 Fabric 的文档最新版本，但我不清楚 Fabric 的共识。 Fabric 使用的共识是什么？它是如何工作的？请解释。 最佳答案 我
我是 Hyperledger Fabric 的新手，我正在尝试在本地向服务器注册 Fabric 客户端。这是我到目前为止所做的。 go get -u github.com/hyperledger/fa
Hyperledger Fabric 中链和状态数据库的主要区别是什么。我很困惑它们是否相同。 最佳答案 Hyperledger Fabric 中有两个“存储”数据的地方: 账本 状态数据库 账本是真
我尝试将图像上传到分类帐中(将图像转换为 base64 字符串并将其作为交易中的 arg 传递)。 当我发送大小为 30 kb 的图像时，它工作正常，但是对于 100 kb 的图像，我的交易失败了，指
我正在尝试在初始化 Fabric CA 服务器后注册管理员: fabric-ca-server init -b “admin:adminpw” 并启动 CA 服务器: fabric-ca-serve
我正在使用来自 super 账本fabric firstsample的cryptogen工具，它未在 crypto-config/peerorganisation/org1.example.com/m
我离开了一家公司，用于访问 Fabric 的电子邮件已被删除。 现在我在同一家公司工作，他们用相同的句柄重新创建了电子邮件。我不知道这是否是问题所在，但我没有收到任何包含报告的电子邮件，也没有收到 B
如果我有 1 个组织 orgA ，在这个组织下我有 2 个用户:user1和 user2 , 在 orgA 中也有 1 个对等点，让我们称之为 peer0 . 现在想象一下，user1的证书在orgA
全部， 据我所知，在 Hyperledger Fabric 环境中，orderer 将消息传递给 peer。如果有离线对等。恢复到 ON-LINE 时，消息如何传递给对端？ orderer如何知道pe
我是一名优秀的程序员,十分优秀！