fabricjs

How to force imageSmoothingEnabled to be false

由 拟墨画扇 提交于 2019-12-10 20:38:29
问题 I am using several layered canvas plus fabric.js canvas like so: <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" class="lower-canvas" width="1401" height="785" style="position: absolute; width: 1401px; height: 785px; left: 0px; top: 0px; -webkit-user-select: none;"></canvas> <canvas class="upper-canvas " width="1401" height="785" style="position:

Zoom in and out with Fabric JS

由 依然范特西╮ 提交于 2019-12-10 19:08:53
问题 I'm building a simple image editor using FabricJS. I can do almost anything I need, the problem comes implementing a zoom feature. As far as I've understood, FabricJS hasn't anything built-it, so that I'm trying to do it by myself. I've put 2 buttons on the page "Zoom in" and "Zoom out", on click they activate a jQuery function, respectively $("#zoomin").click(function() { $("#canvas").width( $("#canvas").width() * 1.25 ); $("#canvas").height( $("#canvas").height() * 1.25 ); }); and $("

Get digested asset_path in model or controller

由 烂漫一生 提交于 2019-12-10 18:26:56
问题 I have an Article model, which has a field svg_path . I use fabricjs to draw a canvas that can contain multiple articles and is modifiable. What I do currently is generating a json that contains all needed fields of the articles, including the svg_path . When I try to use the asset_path helper (http://api.rubyonrails.org/classes/ActionView/Helpers/AssetUrlHelper.html#method-i-asset_path) in either my Article model or controller it will always just return the path without the digest, which

fabric.js straight line and select on click

由 依然范特西╮ 提交于 2019-12-10 17:54:23
问题 I made 3 modes for this code: select line draw line and delete line. It looks like it is working. But I want to change 2 things. For example that every time when I select a line i just need to click it. Can you tell me how i can improve my code ? Thank You for your answers. This is my code: <!DOCTYPE html> <html> <head> <script type ="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script> <script type ="text/javascript" src="http://ajax

how to set contrast and saturation using fabric.js

由 北慕城南 提交于 2019-12-10 14:07:53
问题 I want to set contrast, saturation and hue in my image editor. for this i use fabric.js but it have only brightness option.. Here is the my fabric js code (function() { fabric.Object.prototype.transparentCorners = false; var $ = function(id){return document.getElementById(id)}; console.log($); function applyFilter(index, filter) { console.log(filter); var obj = canvas.getActiveObject(); obj.filters[index] = filter; obj.applyFilters(canvas.renderAll.bind(canvas)); } function applyFilterValue

Mistake with JSON, Fabric and IText

由 天涯浪子 提交于 2019-12-10 12:19:03
问题 I need to load a personalized object itext, loaded from json, but fabric return a error: fabric.min.js:1 Uncaught TypeError: Cannot read property 'async' of undefined(anonymous function) @ fabric.min.js:1enlivenObjects @ fabric.min.js:1_enlivenObjects @ fabric.min.js:4loadFromJSON @ fabric.min.js:4success @ code.js:5067c @ jquery.min.js:2fireWith @ jquery.min.js:2k @ jquery.min.js:4r @ jquery.min.js:4 I need load this JSON { "type": "itext", "originX": "left", "originY": "top", "lockMovementX

Save canvas image on local mobile storage for IOS/Android

由 橙三吉。 提交于 2019-12-10 12:02:34
问题 Im using the fabric javascript library to create a custom image. All the data is saved in a canvas and is shown using canvas tag. After displaying the image, I would like to give the user the option to save it locally. Anyone has any idea how to do that? The solution should work for IOs and Android, I've tried several alternatives but still no luck. [Update 1] I tried using the Canvas2ImagePlugin but for some reason my app restarts when running the window.canvas2ImagePlugin

Incorporating Opacity Slider for Selected Object

由 穿精又带淫゛_ 提交于 2019-12-10 11:58:19
问题 I'm trying to incorporate an opacity slider so that any selected objects are set to change based on the slider's position (100 being completely visible). I'm using fabric.js/master/dist/fabric.js and jQuery 3.3.1. What am I doing wrong here? I am basically trying to incorporate the Opacity slider on fabricjs.com. I'm getting this error: "Uncaught TypeError: Cannot read property 'opacity' of undefined" What I have: https://codepen.io/s-harper/pen/QxeMXL Answers I've tried incorporating:

Proper way to approach loadable masks in Fabric.js

由 大憨熊 提交于 2019-12-10 11:55:56
问题 I have this bounty open Fabricjs mask object with transformation when trying to mask objects with Fabric.js . The tool I'm developing should allow users to draw a mask over image objects, and apply transformations (skew scale rotate etc) to this object before or after the mask. I'm close to obtaining this result but objects with an angle are still not working. I'm also trying to save this object to a database using toJSON and loadFromJSON , but after a few days trying to accomplish this I

fabricjs object / canvas fire an event manually

由 不羁的心 提交于 2019-12-10 11:33:42
问题 i want to manually trigger * select object on the canvas event * - the same event that fires when a mouse click was made within an object area, and the object become selected - the controls become visible. so in other words, i want to show controls for a specified object on the canvas MANUALLY, without user/mouse interaction. any help ? 回答1: solution was found in the docs. if someone looking for the answer - fabric.Canvas.setActiveObject(fabric.Object) ... how the solution was found: i
订阅 fabricjs