如何调整Fabric.js画布和其中的所有内容的大小？
Fabric.js是一个强大的HTML5 canvas库，用于创建交互式的图形和图像应用程序。要调整Fabric.js画布和其中的所有内容的大小，可以采取以下步骤：
- 调整画布大小：
- 使用
setWidth和setHeight方法设置画布的宽度和高度，例如：canvas.setWidth(800)和canvas.setHeight(600)。 - 或者，使用
setDimensions方法同时设置宽度和高度，例如：canvas.setDimensions({ width: 800, height: 600 })。
- 使用
- 调整画布中的对象大小：
- 遍历画布上的所有对象，使用
scaleToWidth和scaleToHeight方法按比例调整宽度和高度，例如：object.scaleToWidth(400)和object.scaleToHeight(300)。
- 遍历画布上的所有对象，使用
- 重新渲染画布：
- 调整画布和对象大小后，使用
renderAll方法重新渲染画布，例如：canvas.renderAll()。
- 调整画布和对象大小后，使用
相关·内容
您好，我正在尝试调整一个Fabric.js画布元素的大小和其中的内容的比例。我只是增加了画布区域的宽度和高度，但图像、文本等内容仍保持原始大小。我如何才能实现此行为。
谢谢。
浏览 3提问于2017-01-30得票数 1
我使用Fabric.js并动态更改画布大小，因此我需要使用适当的对象缩进(根据画布大小以百分比表示)来缩放所有画布对象。如何将顶部和左侧对象的位置设置为百分比？
就像在css中：
顶部: 32%左侧: 10%
// set canvas size dynamically by resize event
this.canvas.setWidth(size.width);
this.canvas.setHeight(size.height);
浏览 0提问于2017-04-14得票数 0
1回答
我正在使用HTML5 canvas和JS创建一个绘图应用程序。我允许用户上传图片，并使用context.drawImage();在画布上绘制它。但是当我尝试编辑图片时，我失败了。如果我想使用鼠标(键盘或任何东西)来拖动和缩放画布上的图片，我应该怎么做？
浏览 1提问于2012-10-31得票数 1
回答已采纳
2回答
我使用了几个分层画布加上fabric.js画布，如下所示：
<canvas id="grid" width="1401" height="785"></canvas>
<div class="canvas-container" style="width: 1401px; height: 785px; position: relative; -webkit-user-select: none;">
<canvas id="fabric_canvas" cl
浏览 3提问于2015-04-10得票数 6
回答已采纳
1回答
我正在使用fabric.js API将一个基本64图像加载到画布中。我需要做的是确定画布上的对象何时调整大小。我找不到任何关于在画布上的对象上发生事件的文档。有办法听这些物体上的事件吗？在画布或窗口上收听调整大小的声音不起作用：
$("canvas").on("resize", function () {
console.log("Resize occurred"); //not called
});
浏览 2提问于2019-09-11得票数 1
回答已采纳
我的软件是一种带有画笔的像素艺术绘制程序，fabric.js经过了很大的修改，以便对fabric.js对象进行像素圆整平移(位置总是整数)，但是调整图像大小并使其像素与画布的比例为1:1仍然是一个问题。
现在，fabric.js zoomToPoint函数被用来用鼠标轮缩放画布，当图像没有缩放时，它们的像素与画布相匹配，但当我缩放任何对象(或向上)时，像素不再与画布相匹配，因此对象的像素实际上比画布像素小或大。
问题的屏幕截图，缩放级别为8 :
原始图像尺寸(没有问题，每个像素适合画布像素)
调整图像大小，图像的像素不再适合画布像素。
当缩放时，图像的像素如何能以1:1的比
浏览 27提问于2015-04-14得票数 0
回答已采纳
2回答
我目前正在开发一个移动设备上的应用程序(android和iPhone)，并使用离子型和科多瓦。我想编辑一张照片。我使用fabric.js库来做到这一点。Fabric.js将图像和其他项转换为画布。然后，我在画布上添加一些图像(贴纸)，并将其导出为图像(DataURL)。因此，画布的大小是非常重要的，因为它是一个质量因素(输出基于小画布的图像将导致质量低下)。画布大小约为607*1080像素(取决于拍摄照片的设备)。我想在不失去质量的情况下把它安装在屏幕上(就像下面解释的那样，我不能在不失去质量的情况下调整画布的大小)。
我尝试了三个想法，但没有人成功。
调整画布：导致质量损失(导出的图像将
浏览 24提问于2015-06-16得票数 10
回答已采纳
2回答
我希望我的画布元素总是有相同的大小-独立于客户的屏幕分辨率。
如果用户使用浏览器进行缩放，画布元素应该始终具有相同的大小。
此外，纵横比应该总是相同的--我想要一个1920-1080点的坐标空间.(如果浏览器没有相同的比率，画布元素的一侧可以有一个边框)。
我成功地用html +css实现了这一点：
用= 100%屏幕
麦克斯。坐标为1920 x 1080
但是当我开发fabric.js时，它改变了画布的大小。我不能把它放回原处，让它有一个反应灵敏的设计。
我怎样才能用fabric.js实现这一点呢？
浏览 6提问于2013-11-12得票数 4
回答已采纳
2回答
通过拖动边缘调整画布元素的大小
、、、、
我试图使它，使我的网站的用户可以调整他们的画布大小，只需拖动它的两侧。我使用的是，它允许我从画布中调整元素的大小，但我需要调整实际画布本身的大小。我不介意使用你推荐的任何新库。
应该能帮助你更好地理解我想要的东西。
顺便提一句，Fabric.js团队有一个交互式工具箱供您在需要时进行实验。
浏览 5提问于2020-06-28得票数 1
回答已采纳
3回答
我目前正在从事画布和Javascript中的图像处理。我用的是fabric.js。我只想让用户上传一个图像，并将其与我们提供的模板合并。呃，
我想要显示上传的图像仅在中心的空圆圈，他们可以调整拖动它。
如果我保持模板作为上层，用户不能拖动和调整，因为画布是充满模板。
如果我把上传的图像作为上层，那么图像就会溢出圆。
如何通过给我的用户一个易于使用的界面来解决这个问题？我尝试在ClipTo函数中使用fabric.js，但它不适用于图像对象。
浏览 7提问于2011-12-03得票数 7
回答已采纳
1回答
我在canvas中使用fabric.js时遇到了问题。在缩放因子为5x的情况下调整大小后，在ZoomIn中单击2次，画布上的元素将消失。请看：
画布大小(仅作为示例)：
<canvas id="c" width="400" height="400"></canvas>
缩放比例因子：
var SCALE_FACTOR = 5;
有什么解决方案吗？
谢谢。
浏览 5提问于2013-04-25得票数 0
回答已采纳
5回答
是否有一种方法可以通过浏览器调整Fabric.js画布的大小以在任何设备上启用相同的结果？我说的是响应性设计。
有人有代码示例吗？
浏览 8提问于2014-02-21得票数 16
回答已采纳
2回答
使用php从画布保存图像
、、、、
我想将画布保存为png。画布的大小约为2000x2000px，canvas.toDataURL()返回5.600.000个字符(700KB)。当我试图将它发送到服务器时，我得到了一个413 request entity too large错误。有任何大小的ajax帖子限制。，LimitRequestBody是2 GB，比我需要的多，post_max_size是132M。
你知道为什么我会得到这个错误吗？
或者有没有更好的保存图像的方法？我使用fabric.js。我试着用php来画这个图像，但是我遇到了很多问题。你知道有什么框架可以画出和fabric.js一样的图吗？
浏览 3提问于2014-01-26得票数 0
1回答
我需要你的帮助。我解释了我的情况:我正在使用fabric.js库在我的应用程序中放置形状、文本等。我的画布大小是1000x1000像素(大约26.45x26.45厘米)。我有一个图像上传脚本只上传高质量的图像，如300dpi。
基本上我所做的事情如下：-绘制画布(上传图像，放置文本等…)；-调整画布的大小乘以比例因子，以便在最后能够具有300dpi的图像；-将画布保存为PNG格式；-使用php/ajax和Imagick，将画布的画布质量设置为300dpi，保存为jpg格式。
问题是:当我保存画布时，上传的图像的质量将会下降，因为我将画布的大小调整为72dpi(当时我保存为PNG)。
我认为一个
浏览 0提问于2013-06-10得票数 18
回答已采纳
开始使用fabric.js，并尝试在另一个画布中添加一个画布，这样顶层画布保持不变，我将向内部画布添加对象。
下面是将画布添加到另一个画布的片段。
canvas = new fabric.Canvas('artcanvas');
innerCanvas = new fabric.Canvas("innerCanvas");
canvas.add(innerCanvas);
我的html看起来像这样
<canvas id="artcanvas" width="500" height="500"><
浏览 17提问于2017-06-08得票数 14
回答已采纳
3回答
我刚开始使用fabric.js，我有一个错误(可能是初学者)：
我通过以下代码将fabric与jquery结合使用：
$(document).ready(function () {
canvas = new fabric.StaticCanvas('scroller');
canvas.add(
new fabric.Rect({ top: 0, left: 0, width: 140, height: 100, fill: '#f55' })
);
});
此代码应在画布上绘制一个140x100的矩形。遗憾的是，只显示了矩形的四分之一。如果我将顶部和
浏览 1提问于2012-01-11得票数 6
回答已采纳
3回答
我有一个画布元素，我在其中画了一个圆。如何为canvas元素提供响应性？
如果浏览器的宽度改变了，我需要改变半径一定的量，如果浏览器的高度改变，我需要改变半径一定的量。
为此，我需要如何计算更改比率？
var canvasWidthRatio = currentDivWidth / initialDivWidth;
var canvasHeightRatio = currentHeight / initialDivHeight;
radius = (I need something here)
浏览 0提问于2014-12-23得票数 0
我想制作一个绘图应用程序，我无法获得基本的功能来平移一个图层，也不能编辑svgs和缩放，转换。
使用paper.js，画布可以很容易地调整大小并适合div，但是我需要fabric.js来移动和缩放对象。织物不调整尺寸或适合div。
在html中，我有以下内容：<canvas id="canvas" resize></canvas>
和css：
#canvas {
width: 100%;
height: 100%;
background-color: transparent;
}
通过这段代码，我可以调整窗口和画布的大小。
但是当我使用fa
浏览 0提问于2019-06-05得票数 0
回答已采纳
1回答
如何在wpf中自动调整画布大小？我在滚动查看器中有一个画布，我将在这个画布中添加几个按钮和几行代码。因为我不知道按钮的位置，所以我必须硬编码一个非常大的数字来表示画布的宽度和高度，或者如果我添加了太多的按钮，它只能显示其中的一部分。
我尝试将宽度和高度设置为自动，但它不起作用。
<Grid>
<ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible">
<Canvas
浏览 3提问于2014-01-20得票数 1
2回答
是否有一种使用fabric.js添加到画布中的抗别名图像的方法，我在使用scaleToHeight函数时遇到了困难。我在织物库里找不到合适的选择。
var canvas = new fabric.Canvas('canvas');
var url = 'https://grafikoan.files.wordpress.com/2012/10/spheres-grafic-design-grafikoan-hd-300-p-2.png';
fabric.Image.fromURL(url, function (oImg) {
oImg.scaleToHei
浏览 5提问于2016-01-19得票数 2
回答已采纳
2回答
WPF和画布覆盖
、、
我有一个代表一些数据的网格，我需要一个画布覆盖在它的顶部，以布局一些线。画布在它自己的用户控件中
问题是，当网格调整宽度和高度时，画布及其内容应该自动调整大小。
我在viewbox中添加了画布，但它没有起到作用。当网格调整大小时，画布不会。画布的目的是在网格顶部覆盖一个类似于标尺的功能。
我不能使用网格上的样式来替换画布，因为网格显示的信息与画布不同。把它想象成图表，其中有不同大小的条形柱(在我的例子中是网格)，而天是覆盖图中的线条(就像甘特图一样)
我的代码：
taxCanvas = new TimeAxis();
Grid.SetRowSpan(taxCanvas, GRightMain.
浏览 1提问于2009-11-02得票数 1
1回答
固定尺寸元件填充区
、、、
我正在创建一个应用程序来计算太阳能电池板在特定屋顶上的安装量。
用户可以输入屋顶的尺寸。我们只有可用太阳能电池板的尺寸。
我以为画布是走的路，但我似乎找不到我需要的信息。
需求
1)根据用户的输入，应调整画布的大小(目前，画布中有一个矩形更改为此大小)
2)用户应该能够创建(和大小)对象放在屋顶上(烟囱，窗口，.)
3)基于开放空间，在画布上自动绘制太阳能电池板(矩形)。
维数和限制
1px = 2cm
屋顶和物体边缘的间距为7 7px (14厘米)。
太阳能电池板高169厘米，宽102厘米。
我已经检出了fabric.js库，但似乎找不到我需要的东西。
我到目前为止画画布
浏览 1提问于2017-09-06得票数 0
我正在使用Fabric.js。当我尝试使用canvas.toDataURL(' image /png')将画布图像发送到服务器时，大约需要40秒。我将其转换为blob，但也需要25-30秒。当我减小画布大小时，它会减小背景图像的大小，但对象(文本和图像)显示在背景图像之外(减小而不是成比例)。如何最小化上传时间？
浏览 2提问于2013-06-20得票数 2
回答已采纳
我正在尝试使用Farbic.js创建一个简单的path对象。当路径被添加到画布时，它的位置似乎不正确。这是我的代码：
<canvas id="c" height="300" width="300"></canvas>
JS
var canvas = new fabric.Canvas('c');
canvas.backgroundColor = '#f5f5f5';
var line = new fabric.Path('M 0 0 L 100 100',{
str
浏览 2提问于2015-02-20得票数 0
我想在画布元素上画一个复杂的图表。
画布的宽度和高度为100%。画布的div容器的宽度为100%，移动设备1的高度为640像素。
假设我画了一个矩形：
void rect(x, y, width, height)
context.rect(0,0,100,640);
对于移动设备1，我具有以下上下文：
宽度:480，高度:640
对于移动设备2，我有这样的上下文：
宽度:1024，高度:768
当我现在切换到移动设备2时，我的context.height从640 to变为768 to。结果是，高度为640 it的矩形现在在它和缺口的顶部之间留下了一个间隙:768 px-640 it=128
浏览 2提问于2013-09-24得票数 1
回答已采纳
例如，画布上有多个对象，A、、*B*和C。其中三个对象被选定为激活对象。通过使用Fabric.js，是否可能丢弃/停用对象中的一个？
例如，选择了三个对象，然后当单击画布外的按钮时，对象B被丢弃/停用。
我查看了FabricJS官方网站上的文档，只找到了FabricJS。这些函数只能禁用所有活动对象，而不能激活特定活动对象。
有人能给我介绍一下这个吗？谢谢!
浏览 7提问于2013-12-09得票数 36
这是一个关于fabric.js的问题。我一直在尝试在contextTop上创建一些形状。当您在contextTop(不使用add)上创建一些形状时，如何将它们与fabric.js画布合并？
let canvas = new fabric.Canvas('C');
canvas.contextTop.StrokeRect(12,12,30,30);
然后，我想让矩形出现在画布上。我该怎么办？谁能告诉我如何在fabric.js中使用canvas API？
我不明白contextTop contextContainer..。
浏览 2提问于2018-08-24得票数 0
3回答
如何使用fabric.js在加载到画布上的图像上实现裁剪工具？我有一个图像加载到画布.Now，我想实现裁剪工具，其中用户被允许裁剪图像，并在他完成后重新加载到画布上。
浏览 63提问于2013-09-11得票数 21
回答已采纳
1回答
我有一个fabric.js画布，其中包含如下所示的图像对象：
我可以用几种颜色/画笔在图像上画画，但我不希望在黑线/像素上画。这是因为它描述了我形象上的墙壁。
因此，如果我在画布上画一些红色，它应该是这样的：
正如你所看到的，黑线应该持续存在。但最大的问题是:我如何在fabric.js中做到这一点？
我能想到两种解决方案：
在fabric.js代码中找到您绘制的位置。添加检查如果(This_pixel_is_black){不做任何事情}否则{绘制像素..。}
创建一个(PHP)脚本，该脚本遍历源图像的每个像素。如果它是一个黑色像素，它将被绘制在一个新的透明画布上。保存该
浏览 2提问于2014-07-03得票数 1
回答已采纳
我正在使用Html5、fabric.js和Java脚本。我在画布中上传多个图像，但有时上传的图像比画布大。我要把图像设置成固定大小。
var canvas = new fabric.Canvas('canvas');
document.getElementById('file').addEventListener("change", function (e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function
浏览 0提问于2016-01-12得票数 2
回答已采纳
1回答
需求：，因此我使用html5画布在iPad(2732 * 2048)上执行绘图，并存储绘制的像素，以便重用它们。
现在，我需要在网站上显示与缩小版本(615 * 460)相同的图形，方法是重新绘制每个像素。
Implementation
我使用fabric.js来渲染所有的画布。
缩小规模：
将画布的高度和宽度乘以调整大小比，因此绘图被缩放到原来的尺寸。强制将容器的高度和宽度固定为我要显示的绘图所需的尺寸。使用CSS.将容器填充到其尺寸的100%。
在Chrome上发布，该绘图是别名的，但它在非视网膜显示器上正确地呈现在Safari中。
也用纯画布进行了测试，它的行为也是一样的。
铬
浏览 3提问于2020-11-17得票数 2
使用屏幕截图中的fabric.js将SVG加载到画布中有问题，您将看到边界框和图标不重叠：
问题似乎来自SVG中的以下属性值：transform="translate(-255.7-577)"。
我很难( fabric.js)弄清楚如何调整SVG，这样就不会发生这种转换了。
任何指南，无论是特定于fabric.js的，还是只是一个本地画布方法，都将不胜感激。似乎找不出如何调整SVG对象中的路径。
浏览 1提问于2016-01-08得票数 1
回答已采纳
我正在使用Fabric.js和React/Redux，我试图在画布上实现以下效果：(请注意，我在顶部和左侧有两个标尺，在平移时不应该到处移动，只是水平和垂直)。
这是我想要达到的效果的视频：
我有以下代码：
var canvas = new fabric.Canvas('c');
var topRuler = new fabric.Text('this is the top ruler', {
top: 0,
left: 60,
selectable: false
});
var leftRuler = new fabric.Text('th
浏览 3提问于2017-03-03得票数 1
回答已采纳
我使用fabric.js的HTML5交互式画布应用程序。如果对象的缩放比例大于画布，则控件在画布外部不可见。如何让它在画布外可见，或者有没有一种方法可以在css中设置这些控制器的样式。
浏览 1提问于2014-07-13得票数 3
4回答
我写了一个WPF用户控件，它的一部分涉及到动态添加元素到画布，这会影响画布的高度。画布嵌套在网格中。当我动态添加元素时，画布的高度会发生变化，但画布最终会延伸到整个控件的边缘之外，而不是调整控件的大小并使其自身更高。如何强制控件正确调整大小？我感觉我需要调用或覆盖Measure或Arrange，但这两个方法我都不太走运--可能是因为我用错误的参数调用它们，也可能是因为它们不是应该调用的正确方法。
浏览 1提问于2009-02-06得票数 6
我想在画布上用JavaScript注册fabric.js事件。如何在画布上触发自定义事件？
浏览 5提问于2015-01-30得票数 2
回答已采纳
我正在使用fabric.js在画布上工作。我已经在画布.now上创建了文本，点击按钮我想增加字体大小.
canvas.set({fontSize,40});
这不管用？任何其他.i创建小提琴的方法请
var canvas = window._canvas = new fabric.Canvas('c');
var text = new fabric.Text('Sample', {
left: 100,
top: 100,
fill: 'navy'
});
canvas.add(text);
document.g
浏览 4提问于2013-08-28得票数 6
回答已采纳
我正在做一个项目，想在同一个画布上同时使用p5.js和fabric.js。我需要fabric.js的功能来在画布上拖动图片，p5.js在图片被拖动时动态地在图片之间绘制线条。我不确定这是否可能，因为它们似乎都有各自独立的画布创建函数 p5.js createCanvas(100, 50); fabric.js canvas = new fabric.Canvas('c'); fabric line类似乎有点太死板，无法实现我想要的效果，所以我正在寻找一个解决办法的想法，或者是一个更适合在fabric canvas上绘制动态线的不同的库。
浏览 85提问于2020-08-07得票数 0
2回答
使用HTML5画布做一个简单的2d物理引擎(碰撞，绘图)。我想要一个全屏帆布与标题导航栏。如何创建此布局并正确处理大小调整？
我尝试过几种解决办法：
一种是通过编程调整画布的大小，以填充其容器onload()和onresize()。画布内容保持不变。
另一个涉及响应性的帆布，其内容随着画布的缩小而缩小。
有人能帮我们找到圣杯吗？最重要的问题是您对画布调整最佳实践的意见(我们应该这么做吗？)如果是这样，那么调整画布像素的大小与媒体查询与flex/% vs javascript容器度量之间的争论如何，等等。
Example/Attempts:
示例1:下面是我在模拟的v1中使用的
浏览 4提问于2017-10-09得票数 0
回答已采纳
我是fabric.js的新手，我想使用fabric创建一个圆，并在画布上渲染它。我已经完成了以下代码。但是这段代码生成了一个椭圆形的图形，它不是一个完美的圆，请让我知道为什么会发生这种情况。
this.canvasIns = new fabric.Canvas('mySampleCanvas');
var myCircle = new fabric.Circle({
radius:50,
borderColor: 'black',
fill:'#fff'
});
this.canvasIns.add
浏览 2提问于2018-01-24得票数 0
1回答
我试图在画布宽度圆角内画一个扭结，当我给这个硬编码和画布相同的大小时，它显示得很完美。
但是，当我使用这些行引用父级的宽度和高度时：
Height="{Binding ElementName=MyDesigner, Path=ActualHeight}"
Width="{Binding ElementName=MyDesigner, Path=ActualWidth}"
右下角将超过画布，我已经附上了一张行为的图片。
任何人都能给我一个提示，这里出了什么问题？
编辑
画布xaml是：
<s:DesignerCanvas Focusable=&#
浏览 1提问于2014-07-02得票数 2
回答已采纳
3回答
我需要实现一个根据其大小缩放其内容的Canvas。我知道有Viewbox，它可以扩展其中的所有内容。然而，我不能使用它，因为一些元素有固定的大小，不能缩放。
另外，如何将Canvas的大小绑定到父元素(例如，可调整大小的窗口)。窗户有sizeToContent，我想要正好相反的尺寸。画布还根据宿主元素的大小使用一些绘图，如何触发重绘，以及如何确保仅在获得有效(或最小)大小时才绘制？
浏览 0提问于2009-05-01得票数 2
回答已采纳
我正在尝试使用fabric.js API将一个SVG文件导入到我的画布中。
呈现可以工作，但是当我试图导出(toSVG())我的画布时，我会得到一个空输出。
下面是我如何将SVG文件添加到画布中(呈现作品)：
fabric.loadSVGFromURL('svg/1000.svg', function(objects, options) {
//group elements
var obj = fabric.util.groupSVGElements(objects, options);
// put
浏览 2提问于2014-10-05得票数 1
回答已采纳
4回答
我有一个画布对象，其中的top和left属性是通过前面的JavaScript函数定义的，但是当我创建fabric Canvas对象时
var fabricCanvas= new fabric.Canvas('mycanvas');
我的HTML画布将top和left属性设置为0。
在创建fabric Canvas对象后，我尝试通过脚本设置顶部和左侧属性，但当我这样做时，canvas会改变位置，但fabric功能(选择和移动功能)仍然保持在之前画布所在的位置( fabric canvas已经定位它的位置)！
我能做些什么来解决这个冲突？有没有办法让画布保持相等呢？
浏览 2提问于2012-02-13得票数 3
回答已采纳
1回答
根据画布的文本内容调整画布大小
、、、、
我有一个带有一些文本的画布，我想在所有方向上调整它的大小，但问题是，如果我使用css属性使其可调整大小，则该画布中的文本内容将变得模糊。
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
我尝试过用容器调整jquery的大小，通过使用css来画布和调整画布的大小，但是遇到了文本内容的高度/宽度问题，而且文本也变得模
浏览 0提问于2014-06-03得票数 0
1回答
帆布反应-法布里奇
、、、、
我试着让响应性的画布遵循这个和
我试着让所有设备的响应画布。
我知道这是可能的，但我很难找到解决办法。
按照上述两个主题，我尝试在javascript中设置最大画布大小的宽度和高度。在css中，每个设备的大小与画布视图不同，即使更改javascript中定义的CSS显示大小也必须保持不变。
我用的是fabric.js
溶液
注意:考虑宽度360 in的堆栈溢出视图，因为在post中预览
var canvas = this.__canvas = new fabric.StaticCanvas ('c');
canvas.setHeight(600);
canvas.
浏览 6提问于2016-01-20得票数 0
回答已采纳
我可以使用Fabric.js将图片添加到画布中。
然而，我有一个固定的宽度和高度的图像框。
图像将动态添加，其宽度和高度将有所不同。
为了使它一致，我想在中间裁剪图像，以适应图像框的宽度和高度。
我如何使用Fabric.js实现这一目标？
样本图像
这是我的代码：
let newObj = {
"version": "4.6.0",
"objects": [{
type: 'image',
version: '4.6.0',
originX:
浏览 22提问于2022-05-23得票数 0
我有一个通过使用重度HTML5画布的应用程序。该应用程序是基于 1.x编写的，我计划将其移植到。我的应用程序允许编写文本和绘制线条、矩形和椭圆。还可以移动、放大、收缩、选择、剪切、复制和粘贴一个或多个这样的对象。还可以使用各种快捷键缩放和平移画布。简而言之，我的应用程序充分利用了Fabric.js。
我找不到太多关于如何将Fabric.js与React一起使用的信息，所以我担心的是: 1.是否可以不进行重大修改；2.它是否有意义，或者我是否应该使用其他对React有更好支持的扩展canvas库？
我能找到的唯一的React+Fabric.js例子是，但是它比我的应用程序简单得多。我主要关注的是
浏览 15提问于2016-06-01得票数 49
2回答
将用户计算机中的图像添加到画布
、、、、
我正在开发一个允许用户创建动态幻灯片的web应用程序。目前，无论如何将计算机用户的图像添加到画布上，我都遇到了一个问题。我正在使用输入按钮从计算机获取文件，它调用一个函数，该函数将图像添加到画布中。
到目前为止，我已经尝试了不同的方法将图像添加到画布中，就像下面这种方法一样：
但是这里显示的代码在我的例子中不起作用，因为它只是将图像绘制到画布中，但它不允许它像Fabricsjs中的Kitchensink.js演示那样可拖动和可调整大小。
我还尝试将图像转换为Base64，并使用LoadJSON将其转换回来，但我遇到了以下错误：
Uncaught TypeError: Cannot read p
浏览 0提问于2013-03-05得票数 8
回答已采纳
如何使用fabric.js使div可旋转而不是画布？需要在fabric.js中进行哪些更新才能满足这一要求？如果将画布放在div中渲染图像，这将是很好的，但需要旋转整个div而不是canvas。
浏览 2提问于2012-09-04得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
