I tried to set the includeDefaultValues:false every time I create an object, however, the save string for an image is still:
[{"type":"image","originX":"center","originY":"center","left":396.16,"top":108.16,"width":2475,"height":675,"fill":"rgb(0,0,0)","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":0.32,"scaleY":0.32,"angle":0,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":true,"transparentCorners":true,"perPixelTargetFind":false,"shadow":null,"visible":true,"clipTo":null,"src":"http://localhost/fabricjstest/designs/images/ds130814014834.png?t=1376502517","filters":[]}],"background":"#FFF"}
I am pretty sure most of those are default values, so how can I get it to work?
Maybe I am saving wrong, so this is my save code:
var obj = canvas.toObject();
var jsn = JSON.stringify(obj);
alert(jsn);
Here is the version directly from the js file: var fabric=fabric||{version:"1.2.9"};
So the question is: How do I disable default values.
Related
I'm kind of newbie and and I'm starting to be very fascinated by GSAP animations...
I found this with the code and everything: https://codepen.io/GreenSock/pen/QWjjYEw.
My problem is that in this animation I have some random pictures, but I want to use some local images that I have instead. Any suggestion of what to change?
I'm using Vue 2 and I put already the JS in the mounted :)
Thanks in advance!
I know that I should change this part but I don't know how
section.bg.style.backgroundImage = `url(https://picsum.photos/1600/800?random=${i})`;
I tried to duplicate this
part:section.bg = section.querySelector(".bg");
with:
section.bg = section.querySelector(".bg");
section.bg = section.querySelector(".bg2")
section.bg = section.querySelector(".bg3");
and then here :
section.bg.style.backgroundImage = "url('myImagePath')";
section.bg2.style.backgroundImage = "url('myImagePath')";
section.bg3.style.backgroundImage = "url('myImagePath')";
Nothing happens...if I put the imagepath inline style on the html I lose the animation.
First, your Q not related to vue.
Next inspect your code (For errors -- your main mistake section.bg is item inside a forEach loop - the path should be related to each iteration).
One way (DRY) to change the images from random images is to get the data-attribute of each bg item inside the forEach "section" loop.
One way to solve this.
Change the path from random path:
section.bg.style.backgroundImage = `url(https://picsum.photos/1600/800?random=${i})`;
To specific one for each iteration:
/*#### NEW CODE ####*/
let image_path = section.bg.dataset.image;
// Get images path from data attribute
section.bg.style.backgroundImage = `url(${image_path})`;
Read more:
Use_data_attributes: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
GSAP UtilityMethods: https://greensock.com/docs/v3/GSAP/UtilityMethods/toArray()
querySelector: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
So I want to preload every image inside one folder and to do so I made a loop which makes an address as a variable using a concat() and tries to load the image, but when I put that variable inside the loadImage() I'm getting the error.
I also tried to find the function which would've gotten every file in the folder in array and load images that way, but I couldn't find anything for p5.js
Code works when I do this:
var address = 'ones/one_1.png';
var img = loadImage(address);
Code doesn't work when I do this:
var str = 'ones/one_';
var n = 1;
var address = str.concat(n.toString(),'.png');
var img = loadImage(address);
Error:
p5.js says: It looks like there was a problem loading your image.
I have an Android Phonegap app made with HTML5/Javascript/CSS. I'd like to suggest the users to choose between light and dark themes at the very first start of the app. When the user once chooses one of them this chose should be saved and relevant theme should be set as default at evry further start of the app. I have read some posts on this theme and am not sure which solution to take: Cache, cookies or HTML5 local storage (I am not familiar with any of them). Which one fits better to my app?
Thank you all!
localStorage wins, simply for persistence and ease-of-use:
// set the selected theme
localStorage.setItem("appTheme") = "dark";
...
var lsTheme = localStorage.getItem("appTheme"),
theme = (typeof lsTheme !== "undefined" ? lsTheme : "bright");
// do something with the selected theme; "bright" is default if no preference stored.
localStorage is the simplest and most effective solution like Kerri Shotts said however the setItem methods syntax is different to that displayed in her answer. As it takes to parameters one being the keyName the other being the keyValue like so: storage.setItem(keyName, keyValue); This then retrieved using the getItem method like so: var aValue = storage.getItem(keyName);.
e.g.
localStorage.setItem('bgcolor', 'red');
localStorage.setItem('font', 'Helvetica');
localStorage.setItem('image', 'myCat.png');
var currentColor = localStorage.getItem('bgcolor');
var currentFont = localStorage.getItem('font');
var currentImage = localStorage.getItem('image');
var value = GEOSERVERBASE + '/geoserver/tiger/wms?service=WMS&version=1.1.0&request=GetMap&layers=tiger:poi&styles=&bbox=-74.0118315772888,40.70754683896324,-74.00153046439813,40.719885123828675&width=427&height=512&srs=EPSG:4326&format=application%2Frss%2Bxml';
var georss = new OpenLayers.Layer.GeoRSS('Tiger POI', value);
map.addLayer(georss);
This is the code on one book, however it's not working. The data is indeed there. but it doesn't load. Any suggestions ?
Looking at what you are putting in your value variable doesn't look correct to me for getting GeoRSS out of Geoserver. Instead try something like
var value = GEOSERVERBASE + '/geoserver/wms/reflect?layers=tiger:poi&format=rss'
or
var value = GEOSERVERBASE + '/geoserver/wms?layers=tiger:poi&format=rss'
Depening on your Geoserver version or configuration
As you can see I have changed the format to just rss rather than what you originally had.
If that works then I would start adding in the other options like bounding boxes ect.
When I use:
loader = new MovieClipLoader();
_root.createEmptyMovieClip("level1",getNextHighestDepth());
_root.level1.createEmptyMovieClip("image",getNextHighestDepth());
loader.loadClip("http://someimage.jpg",_root.level1.image);
...it works and the image shows up.
But when I use:
loader = new MovieClipLoader();
_root.createEmptyMovieClip("level1",getNextHighestDepth());
_root.level1.createEmptyMovieClip("level2",getNextHighestDepth());
_root.level1.level2.createEmptyMovieClip("image",getNextHighestDepth());
loader.loadClip("http://someimage.jpg",_root.level1.level2.image);
...the image doesn't show up. Can anyone tell me why? How can I make this work?
the depth you are supplying is going to be '1'. is that what you are expecting?
each movie clip has it's own set of depths, so the nextHighestDepth() of the newly create 'image' mc, will be 1. it should not prevent loading the image though.
As gthmb says, you should call getNextHighestDepth() on the same MovieClip as you do the createEmptyMovieClip() on. So your code example should be more like:
loader = new MovieClipLoader();
_root.createEmptyMovieClip("level1",_root.getNextHighestDepth());
_root.level1.createEmptyMovieClip("level2",_root.level1.getNextHighestDepth());
_root.level1.level2.createEmptyMovieClip("image",_root.level1.level2.getNextHighestDepth());
loader.loadClip("http://someimage.jpg",_root.level1.level2.image);
Also, I would recommend storing references to the created MovieClips, so you won't have to use the full path in each occurrence in the code, something in the lines of this:
loader = new MovieClipLoader();
var level1:MovieClip = _root.createEmptyMovieClip("level1",_root.getNextHighestDepth());
var level2:MovieClip = level1.createEmptyMovieClip("level2",level1.getNextHighestDepth());
var image:MovieClip = level2.createEmptyMovieClip("image",level2.getNextHighestDepth());
loader.loadClip("http://someimage.jpg",image);