如何在Fabric.js中动态缩放对象以达到画布大小

什么古普塔

我想增加与画布高度和宽度相同的svg图像的高度和宽度,以使其看起来像画布的背景图像。当我按下“设置背景”按钮时,将从我的目录中将一张svg图像设置为画布。我想将此图像动态缩放到画布的高度和宽度。

预期输出:我想要这个

HTML

<h1>canvas</h1>
<canvas style="left: -300px; border: 1px dotted;" height="385" width="400" id="c"></canvas>
<input type="button" id="svg3" value="set background" />

脚本

$(document).ready(function(){
    var canvas = new fabric.Canvas('c');
    var colorSet="red";
    $("#svg3").click(function(){
        fabric.loadSVGFromURL('http://upload.wikimedia.org/wikipedia/en/c/cd/-Islandshreyfingin.svg', function (objects, options) { 
            var shape = fabric.util.groupSVGElements(objects, options);
            shape.set({
                left: 150,
                top:200,
                //height: 700,
                //width: 700,
                scaleX: .35,
                scaleY:.35
            });

            if (shape.isSameColor && shape.isSameColor() || !shape.paths) {
                shape.setFill(colorSet);
            } else if (shape.paths) {
                for (var i = 0; i < shape.paths.length; i++) {
                    shape.paths[i].setFill(colorSet);
                }
            }

            canvas.add(shape);
            canvas.renderAll();
        });
    });
});

这是我的FIDDLE演示

有人知道如何执行此操作吗?

塞尔吉·帕拉西夫(Sergiu Paraschiv)

您知道画布的宽度和高度。所以将工作:

shape.set({
    top: canvas.height/2,
    left: canvas.width/2,
    scaleY: canvas.height / shape.height,
    scaleX: canvas.width / shape.width
});

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在Fabric.js上获取鼠标坐标?

来自分类Dev

如何在Fabric.js中绘制弧

来自分类Dev

如何在Fabric.io中初始化Crashlytics?

来自分类Dev

如何在Fabric JS中围绕中心旋转动画

来自分类Dev

如何在Fabric JS中设置画布的重复背景图像?

来自分类Dev

如何在Fabric中动态编辑env.roledefs?

来自分类Dev

如何在Fabric JS的角落启用非均匀缩放

来自分类Dev

缩放fabric.js画布对象

来自分类Dev

如何在Fabric JS中的画布的一个角添加删除图标功能?

来自分类Dev

如何在Fabric js的组中添加图像

来自分类Dev

如何在fabric.js中选择和拖动对象

来自分类Dev

如何简单地在openGL中缩放对象?

来自分类Dev

如何在Fabric.js中停止/取消requestAnimFrame()

来自分类Dev

如何在画布上更改SVG颜色-Fabric.js

来自分类Dev

我如何在Hyperledger Fabric中获得唯一的ID

来自分类Dev

如何在iOS应用中卸载Fabric工具包?

来自分类Dev

如何在Angular 8中修改画布上fabric.js背景图像的图像选项

来自分类Dev

我如何在我的fabric.js画布中引入基于键的事件?

来自分类Dev

如何在Fabric JS中围绕中心旋转动画

来自分类Dev

如何在Fabric中动态编辑env.roledefs?

来自分类Dev

如何在Fabric JS的角落启用非均匀缩放

来自分类Dev

如何在Fabric Js中使用Selenium IDE

来自分类Dev

如何在fabric.js中使用画布保存图像

来自分类Dev

如何在Fabric中创建自定义帮助菜单?

来自分类Dev

如何在Fabric js中的组中添加图像

来自分类Dev

如何在Itext Fabric JS中删除默认文本

来自分类Dev

Fabric.js-如何在鼠标移动时检测画布?

来自分类Dev

如何在 Hyperledger Fabric 中创建新块

来自分类Dev

如何在独立 Service Fabric 中安装多机集群?

Related 相关文章

热门标签

归档