Fabric js 中的 Canvas 客户端大小

2024-04-15

在通常的画布CSS宽度和客户端宽度可能不等于彼此,如何在Fabricjs上得到这个?举个例子:我想在页面上使用 640*360px 的画布,里面有 1280*720px 的图像。 我知道我可以缩放图像,但 dataUrl 会给我一个较小的图片,不是吗?


有一个solution http://fabricjs.com/docs/fabric.StaticCanvas.html#setDimensions。您可以使用 CSS 大小初始化 Fabric.js,然后setDimensions with backstoreOnly标记或初始化所需的客户端大小和用途setDimensions with cssOnly旗帜。 示例#1:

var canvas = new fabric.Canvas('c', {width: 640, height: 360});
canvas.setDimensions({width: 1280, height: 720}, {backstoreOnly: true});

示例#2:

var canvas = new fabric.Canvas('c', {width: 1280, height: 720});
canvas.setDimensions({width: '640px', height: '360px'}, {cssOnly: true});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Fabric js 中的 Canvas 客户端大小 的相关文章

  • canvas.toDataURL() 用于大画布

    我有一个问题 toDataURL 对于大画布 我想编码base64并在 php 文件上解码 但如果我有一个大画布strDataURI变量为空 My code var strDataURI canvas toDataURL strDataUR
  • 如何使用 Fabric.js 创建自定义画笔涂料?

    我一直在尝试使用图像文件创建自定义画笔绘画织物JS http fabricjs com 我尝试过使用布料 PatternBrush http fabricjs com docs fabric PatternBrush html但这不是我正在
  • Fabric.js 将画布(或对象组)剪辑为多边形

    我在 Fabric js 中绘制了一个画布 在其中添加了一组矩形 我想将这些矩形的边缘限制为一组 使其不超出某个区域 想象一下制作一件条纹 T 恤 条纹是通过使用一系列矩形制成的 我需要使它们保持 T 恤的形状 我认为最好将整个画布夹到 T
  • FabricJS:当我更改路径坐标时,路径的边界框不会更新

    我们在处理结构中的路径时遇到问题 当用户拖动第一个点或最后一个点时 我们需要始终更改二次线 路径 的坐标 路径会像往常一样更新 但问题是路径的边界框不会随着 object path 的每次更改而更新 参见图片 function var ca
  • Fabric.js - 无需按住鼠标按钮即可移动对象

    在 Fabric js 中 可以通过左键单击 按住并移动鼠标在画布中移动对象 在这种情况下 所选对象会跟随鼠标光标移动并object moving被解雇 释放鼠标左键可退出此模式 有没有办法改变这种行为并让对象通过不同的事件进入这种模式 例
  • Fabric.js 逐像素操作 Image 对象来改变颜色

    我想获取 Fabric Image 对象的图像数据 以循环遍历每个像素 并在给定颜色为另一种给定颜色时更改其颜色 但是我不想获取整个画布的数据 仅针对该特定对象 像这样的东西 changeColor object targetColor r
  • 使用fabric.js,增加按钮单击时画布文本的字体大小

    我正在使用 Fabric js 在画布上工作 我已经在画布上创建了文本 现在 单击按钮我想增加字体大小 canvas set fontSize 40 这不起作用 任何其他方法 我已经创建了小提琴请Check http jsfiddle ne
  • FabricJS:始终在画布上居中对象

    是否可以始终将对象置于 Fabricjs 画布的中心 背景 我正在构建一个网络工具 可以使用 Fabricjs 轻松创建复杂的动画 我希望能够将画布大小的宽度和高度设置为 100 因此 我想将所有对象放置在中心并为其添加 X Y 偏移 当我
  • 如何禁用 freedrawfabricjs 选择

    在 FabricJs 中使用 FreeDrawing 绘制某些内容后 您可以选择绘制的内容并移动它 有没有办法禁用此选择 如果您不需要在画布上进行任何交互 您可以使用静态画布 var canvas this canvas new fabri
  • webpack、babel:Fabric.js 的 es6 导入与 require

    我在我的开发工具链中使用了 webpack 和 babel 运行以下代码时 import as fabric from fabric var canvas new fabric Canvas canvas 我收到以下错误 fabric2 d
  • 填充形状的图像不会在 FabricJS 中使用 loadFromJSON 加载

    I have JSON带有 Fabric Rect 对象的数据 当我尝试加载这个时JSON数据到织物画布上从JSON加载 形状加载完美 但形状中填充的图案未渲染 仅在单击形状后才会渲染图案 我已将我的代码复制到织物厨房水槽执行模块中 并尝试
  • Fabric.js 子类中的颜色正在更改为黑色。

    我正在尝试子类 Fabric Group 并将 JSON 字符串加载到其中 我遇到的问题是子类组中的 Fabric Rect 的颜色正在更改为黑色 当我直接在 Fabric Group 中执行此操作时 效果很好 我一直在玩 fromObje
  • 如何从 Canvas 对象中删除边框和角? [Fabric.js]

    我在一个项目中使用fabric js 用户可以在画布上绘图 然后保存到png图像 使用canvas toDataURL 函数 但是 我们注意到 如果用户移动对象并单击 保存 按钮 它会保存先前移动的对象的边框和角 当您移动或调整对象大小时
  • FabricJs - 通过 SVG 对象剪切区域

    我对 FabricJS 对象有疑问 我想创建一个剪切区域 svg 对象 它将剪切加载的图像 我在加载的图像上使用 ClipTo 方法 将其传递到剪切区域形状对象 SVG 中 但它不起作用 因为 SVG 不是 FabricJS 意义上的形状对
  • 如何使用 Fabric.js 在画布上画一条线

    我正在使用 Fabric js 在画布上画一条线 这是我的代码 但我没有得到任何输出 Line click function alert Line canvas add new fabric Line 50 100 200 200 left
  • 尝试在 FabricJS 中使用句柄创建对话气泡

    我正在尝试使用 FabricJS 创建一个语音气泡 以集成到 WordPress 插件中 希望 免费发布 以帮助人们注释图像 我在这里找到了原始的气泡 语音气泡 html5 canvas js https stackoverflow com
  • 使用groupSVGElements后如何选择子元素

    我正在将 svg 加载到具有子元素的 Fabric 中 我使用 groupSVGElements 对它们进行分组 我需要能够选择每个子元素 这是一个 onclick 事件 允许我选择一个子对象 我把这个小提琴放在一起http jsfiddl
  • Fabric JS ClipPath:裁剪后如何使图像适合画布?

    我使用 FabricJS 和 ClipPath 属性实现了图像裁剪 问题是如何使裁剪后的图像适合画布 我希望裁剪后的图像填充画布区域 但不知道是否可以使用 Fabric js 来完成 因此 我希望用户单击 裁剪 按钮后图像的选定部分适合画布
  • Fabric js-在保存和加载回画布时缺少添加附加属性的扩展 toObject 方法

    我创建了一个带有矩形和文本的织物组 最后 我使用以下代码将自定义属性 名称 添加到组类中 我使用 JSON stringify canvas 将画布数据序列化为 JSON 并将 Json 字符串发送到 java 最后将 Json 字符串保存
  • 在 Fabric.js 中按宽度/高度在另一个画布对象内居中和缩放画布对象

    Goal 将一个对象 水平和垂直 置于另一个对象 矩形或组 的中心canvas via Fabric js或者通过Javascript保持原始对象的长宽比相同 但也不超过父对象的宽度 高度比例 父对象 矩形或组 不会居中于canvas元素

随机推荐