ASP.NET MVC 4从JSON中递归的模型绑定
我正在使用 Fabric.js ,将图形对象保存到数据库中.我们使用了很多组,从而产生了几个层次的图形对象.我创建了匹配从画布对象发回的值的类,并且它正确地绑定了图纸中的顶级项目.但是,它没有约束任何子项目,我不知道怎么了. 我的模型(删除了一些属性以保持简短: public class DrawingObj { public int ParentID { get; set; } //will be populated manually [JsonProperty("type")] public string Type { get; set; } [JsonProperty("originX")] public string OriginX { get; set; } [JsonProperty("originY")] public string OriginY { get; set; } ....
10 2024-04-23
编程技术问答社区
如何在 fabric js 中使用 fabric.Textbox Class override 制作自定义类?
我正在使用Fabricjs版本:3.6.3 我想做新的Fabricjs类,称为:button 使我从织物JS上延长了一个名为Textbox的类,它将 draw a Rectangle在Text后面看起来像一个按钮. 但是问题是,我无法将height设置为Button,因为height在Texbox对象中不允许. 我想将Height和Width设置为Button对象. Width由于Textbox,正常工作.如果宽度保持较小,则它将经文本宽度宽度,并且可以通过双击可以编辑.但是唯一的问题是不能将Height设置为object 应该是Text vertically center Height增加. 简而言之 预期输出: 但实际输出: 这是我的代码创建按钮: // fabric js custom button class (function (fabric) { "use strict"; // var fabric = global.f
6 2024-04-05
编程技术问答社区
如何删除Canvas对象的边框和角落?[Fabric.js]
我在一个项目中使用Fabric.js,用户可以在该项目中绘制画布,然后保存到png image(使用canvas.todataurl()函数). 但是,我们注意到如果用户移动一个对象并单击"保存"按钮,它将保存一个先前移动的对象的边框和角(移动或调整对象大小时始终显示边界). 因此,我们需要一种在保存之前删除对象边界的方法吗? 解决方案 是.您可能想在保存图像之前停用所有对象: canvas.deactivateAll().renderAll(); (renderAll停用所有对象后更新实际的视觉状态) 其他解决方案 如果您喜欢用户的想法,并缩放了画布上绘制的路径.我会选择Kangax的建议. 另外,如果要更改行为,则可以将每个路径元素上的hasBorders和hasControls字段设置为false.然后,您将永远不会看到控件/边界,因此永远无法打印它们.但这也意味着您不能旋转或扩展路径,但是您仍然可以移动它们. ,或者您可以走得更远,使路径无法
12 2024-04-02
编程技术问答社区
在 fabricjs 中 loadfromJSON 时,Base64 图像数据无法工作
我正在尝试加载具有图像对象的JSON对象.图像对象将基本64图像数据作为背景.但是我无法实现Loadfromjson方法. 代码: var jsonDataSet = '{"objects":[{"type":"image","originX":"left","originY":"top","left":0,"top":0,"width":700,"height":600,"fill":"rgb(0,0,0)","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"selectable":false,"ha
12 2024-03-27
编程技术问答社区
Fabric.js与Typescript和Webpack。Canvas不是一个构造函数
我正在尝试将Fabric.js与Typescript一起使用,然后在Laravel 5.4应用程序中使用其他一些模块,这些模块在浏览器中正常工作. @types/Fabric ist已安装,打字稿的行为正确.新的TypeScript以及WebPack,我尝试了一些变体,但没有成功. 问题 result.js:198 Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_1_fabric___default.a.Canvas is not a constructor 变体A code.ts import fabric from "fabric"; const canvas = new fabric.Canvas('my-canvas'); result.js var canvas = new __WEBPACK_IMPORTED_MODULE_1_fabric__default.a.Canvas('my-canva
24 2024-03-26
编程技术问答社区
webpack, babel: es6 import vs. require for Fabric.js
我在开发工具链中使用了Webpack和Babel;运行以下代码时: import * as fabric from 'fabric'; var canvas = new fabric.Canvas('canvas'); 我有以下错误: _fabric2.default.Canvas is not a constructor ,如果我使用require('fabric');而不是 import. 我尝试了不同的调用方式import,但它们都没有起作用. 我的伸缩工具抱怨不确定的fabric变量,因此我想正确定义它.令人惊讶的是(对我来说)这个代码 不起作用: var fabric = require("fabric"); 在这种情况下,我会出现以下错误: fabric.Canvas is not a constructor 我在做什么错? 解决方案 在我当前的设置中,使用fabric从NPM开始,我使用 import {f
12 2024-03-26
编程技术问答社区
为AWS Lambda构建节点画布
我是Linux&Node Noob.我正在尝试在AWS lambda中运行Fraighjs(需要节点 - 玻璃瓶).我已经能够按照说明在AWS Linux EC2上启动并运行,但是,Lambda让我处于智慧.任何人都有关于如何将其编译为AW Lambda的提示或指示? 解决方案 我在 node canvas github网站中找到了这个问题.发问者也试图在Lambda运行Fabricjs.这是带有答案的相关部分: 确保您正在将其编译为Lambda当前使用的AMI: http://docs.aws.aws.aws.aws.aws.amazon.com/lambda/latest/dg/current-supported-versions.html lambda在/var/task上运行(这是您解压缩时的路径),因此,zip文件的根部将在/var/task/something.so.so.so. 然后,我们想使用" rpath"来构建我们的库: expo
14 2024-03-22
编程技术问答社区
在模型或控制器中获取消化的资产路径
我有一个Article模型,该模型具有字段svg_path. i使用fabricjs绘制一个可以包含多个文章且可修改的画布. 我当前正在生成的json包含文章的所有必需字段,包括svg_path. 当我尝试使用asset_path助手时( http://api.rubyonrails.org/classes/actarview/helpers/asseturlhelper.html#method-i-aset_path ) ,它在开发环境中起作用,但在生产中不起作用.我在那里包括这样的助手: include ActionView::Helpers::AssetUrlHelper asset_path(svg_path) 如果我在视图中调用此助手,它将生成正确的路径,包括摘要哈希. 如何在json对象中获得正确的路径? 解决方案 解决方案是这样称呼助手: ActionController::Base.helpers.asset_path(s
18 2024-03-17
编程技术问答社区
用于Fabric.js的撤销重做
我正在尝试将撤消/重做功能添加到我的Fabric.js帆布中.我的想法是要有一个计数器来计算帆布修改(现在它计算对象的添加). 我有一个状态数组,将整个画布推到我的数组中. 那么我只想回忆 canvas.loadFromJSON(state[state.length - 1 + ctr], 当用户单击撤消时,CTR将减少一个并从数组中加载状态;当用户点击重做时,CTR将增加一个并从数组中加载状态. 当我用简单的数字体验到这一点时,一切正常.有了真正的织物画布,我会遇到一些麻烦 - >它真的不起作用.我认为这取决于我的活动处理程序 canvas.on({ 'object:added': countmods }); jsfiddle 在这里: 这是仅工作号码的示例(结果请参见控制台): 解决方案 我自己回答了. 参见 jsfiddle : 我做了什么: if (savehistory === true) { myjson
30 2024-03-05
编程技术问答社区
Fabric.js动画对象/图像
大家好,这是我一直在使用的代码.它将对象从A移动到B.我要做的是有多个要移动的点.因此,从启动位置a-> b,然后从b-> c等.也许有一些会包含一组坐标的变量,这些坐标将作为参数馈入某些动画函数.但是我尝试过的任何事情都只会导致执行最后一个命令,因此它将直接从A-> c移动,忽略B.任何建议/演示. . javascript var canvas = new fabric.Canvas('scene', { backgroundColor: 'green'}); var triangle = new fabric.Triangle({ width: 30 , height: 30 , fill: 'red' , left: 30 , top: 0 }); canvas.add(triangle); function animateTop() { triangle.animate('top', '+=55', { duration: 1
24 2024-02-26
编程技术问答社区
Fabric.js画布上的GIF动画
我正在从事一个项目,我被要求在织物上支持动画gif. 按照 https://github.com/kangax/kangax/kangax/fabric.js/issues/- 560 ,我遵循建议,使用Fabric.util.requestanimframe进行定期渲染.视频渲染恰好使用此方法,但GIF似乎没有更新. var canvas = new fabric.StaticCanvas(document.getElementById('stage')); fabric.util.requestAnimFrame(function render() { canvas.renderAll(); fabric.util.requestAnimFrame(render); }); var myGif = document.createElement('img'); myGif.src = 'https://i.stack.imgur.com/e8nZC.gi
40 2024-02-26
编程技术问答社区
在angular应用程序中加载织物js
所以我使用bower下载并安装了Angular应用程序内部的织物,并且在加载它时遇到了麻烦. 我在app.js文件的顶部有以下内容.除了织物 外,其他所有东西都可以加载 angular .module('myApp', [ 'flow', 'fabric', 'ngAnimate', 'ngCookies', 'ngResource', 'ngRoute', 'ngSanitize', 'ngTouch', 'ui.bootstrap', 'ui.router', 'controllers.main', ]) .config( function ($stateProvider, $httpProvider, flowFactoryProvider ) { 加载页面时,我会收到以下错误. [$injector:modulerr] Failed to instantiate module fabric
14 2024-02-24
编程技术问答社区
从电脑上传图片到Fabric.JS Canvas
那里有任何织物. 我已经完成了公平的研究,我似乎找不到有关如何在Fabric.js帆布中添加图像的解释. 用户旅程: a)用户从输入文件类型按钮上载图像. b)一旦他们从计算机中选择了一个图像,我想将其放入用户帆布中. 到目前为止,我必须将图像存储到表达式中,这是我的代码: scope.setFile = function(element) { scope.currentFile = element.files[0]; var reader = new FileReader(); /** * */ reader.onload = function(event) { // This stores the image to scope scope.imageSource = event.target.res
18 2024-02-24
编程技术问答社区
问题织物js为形状和背景角应用背景色
我面临着织物中的问题.这个问题是 我有当前代码的默认背景,我能够更改背景颜色 如果我想更改该对象的背景颜色,则将任何对象或文本更改为透明度 我试图改变形状颜色,但背景颜色正在改变. 实际上,我发现以下HTML我有什么问题. 这是我的html **
16 2024-02-22
编程技术问答社区
在React-Native中使用FabricJS
我有一个应用程序,该应用程序是建立在ReactJs上的,并广泛使用Fabricjs.我们计划重复使用大量代码并使用React-native构建移动应用程序,但我不确定如何将Fabricjs组件集成到其中. 该应用类似于 https://www.my-wallsticker.de/wandtattoo-selber-gestalten/ 我找到并使用了 Fabricjs ,但没有任何反应. 解决方案是什么? 解决方案 您必须使用canvas使用WebView(或类似此图书馆的内容: https ://github.com/iddan/reaeact-native-canvas )为了能够用Frainejs渲染任何东西.
20 2024-02-05
编程技术问答社区
DOM的某个元素中的Keydown事件
是否可以在DOM的单个元素中捕获键盘键组合的事件? 我的意思是,我想要的是,如果我有 我只想在DIV上拿起键的组合 解决方案 解决了在" .upper-canvas"(是空间空间)元素中添加Tabindex 1,然后用jQuery绑定" .upper-canvas"上的键. var canvas = new fabric.Canvas('c'); $(document).ready(function(){ $(".upper-canvas ").attr('tabindex', 1); }) $(".upper-canvas ").on("keydown", function(event){ console.log("Hi"); }); jsfiddle So
18 2024-01-18
编程技术问答社区
用 fabric.js 显示适用的控件
使用Fabric.js仅在选择文本时才隐藏/显示控件,例如文本控件?现在,我有一个按钮可以让某人插入文本和文本编辑选项,但是我并不总是希望显示此内容.理想情况下,选择时将是一个弹出声. 现在,我的代码是: 在 // Add image from local var canvas = new fabric.Canvas('c'); document.getElementById('file').addEventListener("change", function(e) { var file = e.target.files[0]; var reader = new FileReader(); reader.onload = function(f) { var data = f.target.result; fabric.Image.fromURL(data, function(img) { var oImg = img
10 2024-01-18
编程技术问答社区
在应用过滤器时显示加载屏幕
将过滤器应用于占用整个画布的图像对象可能需要几秒钟的时间,我想在发生这种情况时显示加载屏幕被应用了. 应用过滤器的当前方法: applyFilter: function (index, filter) { var obj = designer.baseImage, $loading = $('#loading-canvas'); console.log('show loading'); $loading.show(); obj.filters[index] = filter; obj.applyFilters(function () { console.log('hide loading'); $loading.hide(); designer.canvas.renderAll(); }); } 调用该方法(单击)时,"显示加载"将立即记录到控制台.直到应
24 2024-01-18
编程技术问答社区