fabricjs

Opacity slider for a fabric object

由 南笙酒味 提交于 2019-12-11 08:08:06
问题 I have a canvas and it includes fabric objects.I want to do opacity slider for text area's backround "textbackroundColor" in canvas.How can I do slide and change functions? $("#backgroundOpacity").slider( { min: 10, max: 50, value: 30, slide: text_bgColor_slider_moved, change: text_bgColor_slider_changed }); 回答1: first get active object of canvas var activeObject = canvas.getActiveObject(); and then $("#backgroundOpacity").slider( { max : 100, value : activeObject.opacity * 100, slide:

Get height and width of Fabric.js object after modifying wrong

由 社会主义新天地 提交于 2019-12-11 07:58:32
问题 Here is my code. <canvas id="c" width="240" height="300" style="border:1px solid #000000"></canvas> <script> var canvas = new fabric.Canvas('c'); canvas.backgroundColor = 'yellow'; canvas.renderAll(); fabric.Image.fromURL(<?php echo '"' . $url . '"'; ?>, function(myImg) { var img1 = myImg.set({ left: 0, top: 0 ,width:150,height:150}); canvas.add(img1); }); function objectMovedListener(ev) { let target = ev.target; console.log('left', target.left, 'top', target.top, 'width', target.width *

fabricjs objects order in group

由 不想你离开。 提交于 2019-12-11 07:53:22
问题 I have no idea how to order objects in group other then repeat add and remove to sort the objects. I tried unshift on group objects but it does not save state. $(document).on("click", "#addToGroup", function() { var objects = canvas.getActiveObject(); if(objects && objects.type === "activeSelection") { objects.toGroup(); canvas.requestRenderAll(); } }); count = 1; $(document).on("click", "#addObject", function() { canvas.add(new fabric.Rect({ width: 100, height: 100, left: 100 + (count * 20),

Change png image color in fabric js

由 夙愿已清 提交于 2019-12-11 07:38:34
问题 Is there any way to change the color of the image using fabricJS ? Applying Tint filter will just add color not changing the original color. 回答1: For an image like this you can use the hue rotation filter. var canvas = new fabric.StaticCanvas('c'); var image; var imgEl = document.createElement('img'); imgEl.crossOrigin = 'anonymous'; imgEl.onload = function() { image = new fabric.Image(imgEl); image.filters = [new fabric.Image.filters.HueRotation()]; canvas.add(image); } imgEl.src = 'https:/

Printing fabricjs canvas on desktop and mobile devices?

由 自作多情 提交于 2019-12-11 07:27:56
问题 I'm using the following to print on my canvas from my laptop which works great (kudos user700284) but when I try to use the functionality on a tablet or mobile it doesn't work. When I click the button, a new tab opens and closes immediately (this is on mobile / tablet). What might I do to enable printing on all mediums? function printCanvas() { var dataUrl = document.getElementById('c').toDataURL(); //attempt to save base64 string to server using this var var windowContent = '<!DOCTYPE html>'

canvas json to svg in php

由 ≡放荡痞女 提交于 2019-12-11 06:18:07
问题 I have stored the json output of canvas in database. I have a canvas with front and back view. When ever user submit the form using below code i am able to store the json in Database. $('#save_canvas').click(function(e){ e.preventDefault(); var front_side_json = JSON.stringify( canvas1.toJSON() ); var back_side_json = JSON.stringify( canvas2.toJSON() ); $('#front_side_object').val(front_side_json); $('#back_side_object').val(back_side_json); $('#card_template_form').submit(); }); Now the

Image is occupying only in little space inside box

由 浪尽此生 提交于 2019-12-11 06:17:30
问题 We are using stackoverflow links code to upload image in a site once we upload, its occupying only little part in box as here. But image should occupy full box. 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 (f) { var data = f.target.result; fabric.Image.fromURL(data, function (img) { var oImg = img.set({left: 0, top: 0, angle: 00,width:100

Blurrying bug with several lines in a group

由 不羁岁月 提交于 2019-12-11 06:03:43
问题 Why does adding few more lines to the Group object results in such blurrying effect? Note that having a single line in a group doesn't result in such behavior. It seems that it reproduces only with several lines. Here's the code to reproduce the bug (you can try it online here -- https://jsfiddle.net/90tw8mfs/, zoom a little and you'll see what I'm talking about): var canvas = new fabric.Canvas('c'); function addFirstGroup() { var firstLine = new fabric.Line([0, 0, 0, 100], { strokeLineCap:

FabricJS: object:moving event doesn't fire when user selects multiple objects

由 梦想与她 提交于 2019-12-11 05:21:27
问题 In FabricJS, there is an object:moving event you can fire a function for, which I have rigged up to keep lines attached to dots in the same way they have here in the stickman demo: http://fabricjs.com/stickman/ In their demo, they have turned of the ability to select dots by clicking and dragging a square around them, then moving that selection of objects by clicking and dragging it. In my case, I want the user to be able to select multiple dots and drag them at the same time, but right now

Fabricjs freedrawing hline brush

由 隐身守侯 提交于 2019-12-11 05:19:46
问题 I was following to create freedrawing from here: http://fabricjs.com/freedrawing/ it was working fine with Pencil,Circle,Spray & Pattern but isn't working with hline,vline,square,diamond & texture. I had defined canvas earlier like this: $(document).ready(function () { //setup front side canvas canvas = new fabric.Canvas('tcanvas', { hoverCursor: 'pointer', selection: true, selectionBorderColor: 'blue' }); }); I have created free drawing function like this: function getFabricBrush(mood) { var
订阅 fabricjs