TL; DR: why is the location of the image different?
There seems to be some difference in the coordinate system between 1.3.0 and 1.3.12. Here are the HTML file test.html, working with the newly cloned and built fabric.js by myself ():
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="./fabric.js/dist/all.min.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<canvas id="c"></canvas>
</body>
</html>
and the JavaScript file test.js:
$(function(){
var canvas = new fabric.Canvas('c');
canvas.setWidth(window.innerWidth);
canvas.setHeight(window.innerHeight);
fabric.Image.fromURL('test.png', function(img) {
var group = new fabric.Group([img],
{
hasBorders: false,
hasControls: false,
selectable: true,
evented: true,
})
canvas.add(group);
});
});
The web page looks like
But if I change fabric.js to the version on the CDN, which is 1.3.0:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.3.0/fabric.min.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<canvas id="c"></canvas>
</body>
</html>
The web page will look like
The second case makes more sense for me. It puts the center of the image to (0,0). But in the first case it seems to put the image center to (image_width, image_height). So is this a bug? Or a feature of coordinate system for groups?
UPDATE: if simply using
$(function(){
var canvas = new fabric.Canvas('c');
canvas.setWidth(window.innerWidth);
canvas.setHeight(window.innerHeight);
fabric.Image.fromURL('test.png', function(img) {
canvas.add(img);
});
});
, the top left corner of the image will be attached to (0,0).
UPDATE 2: OK, I need to manually set {left: 0, top:0} for the group. But why?
What you're seeing is that originX/originY default values were changed to "left"/"top" from "center"/"center".
This was a very confusing behavior to almost anyone starting with Fabric and we finally got rid of it. You can see this breaking change in a changelog (between unreleased edge/dev version and latest stable 1.3.0)
https://github.com/kangax/fabric.js/blob/master/CHANGELOG.md
originX/originY represent what left/top values of an object are relative to. All objects' left/top used to be relative to their centers; now we're using more common system of left/top corner.
Related
I have a very simple react program that imports react using a script command and a cdn.
How do I covert it to preact while keeping the same structure?
I tried to follow these instruction, but they weren't very clear
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://unpkg.com/react#15/dist/react.js"> </script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.js"></script>
</head>
<style type="text/css">
</style>
<body>
<div id='root'></div>
<script type="text/babel">
function T(props){
return <h1>{props.title}</h1>
}
ReactDOM.render(<T title='welcome'/>,document.getElementById('root'))
</script>
</body>
</html>
As per this github issue you have a couple of different options for using Preact with a script tag. You can directly call h- Preact's version of React.createElement or you can use babel standalone to transform your JSX as you were in your original React example. Here is a Preact conversion of your original example.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/preact/7.2.0/preact.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.js"></script>
</head>
<body>
<div id='root'></div>
<!-- option 1: alias it -->
<script>window.React = { createElement: preact.h }</script>
<script type="text/babel">
function T(props){
return <h1>{props.title}</h1>
}
preact.render(<T title="Welcome" />, document.getElementById('root'));
</script>
</body>
</html>
I am trying to build an offline web application using openlayers as shown in the sample code below. However the map does not load with the error (as shown in the firebug):
Error: "https://c.tile.openstreetmap.org/4/6/6.png"
I read through other Q/As on this and found that I need to download some of the map layers (image/tile/vector) and refer it locally. But I guess there are other sub steps to it. Anyone who has already tried doing this and know exactly the steps to be done for it?
I came across this question in SO Offline Geographical Maps in Web Application after converting .osm to .map but it doen't have a detailed answer to how to set the offline map repository.
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="myOfflineWebAppWebContent/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="myOfflineWebAppWebContent/js/ol.js" type="text/javascript"></script>
<title>Hello Open Layers</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
</script>
</body>
</html>
hi I am trying to get an instagram feed onto my website showing my user photos. I have put the javascript at the top of my page as follows:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>tomsaxby.com</title>
<!-- CSS ------------------------------------------------------------------------------------------- -->
<!-- Bootstrap --><!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- EDITS -->
<link rel="stylesheet" href="css/style.css">
<!-- Fonts -->
<link rel="stylesheet" href="fonts/neuzeit/MyFontsWebfontsKit.css" type="text/css" />
<!-- CSS ------------------------------------------------------------------------------------------- -->
<script type="text/javascript" src="path/to/instafeed.min.js"></script>
<script type="text/javascript">
var feed = new Instafeed({
get: 'user',
userId: 904401907,
accessToken: '904401907.1677ed0.27d4a579f194430cbe77c28af165aae1'
});
userFeed.run();
</script>
</head>
I have then put a div with he id of "instafeed" into the body of my page. but nothing displays either locally or when i upload my files? Does anyone know why this is?
The most likely cause of your problem, is that instafeed.js is trying to run before your page has been completely loaded.
To resolve this, make sure you have put <div id="instafeed"></div> on your page, and that you are loading instafeed.js after the page has been completely loaded:
$(document).ready(function() {
var feed = new Instafeed({
get: 'tagged',
tagName: 'awesome',
clientId: clientId
});
feed.run();
});
One other thing...something the instafeed page does NOT seem to mention...is to add a "limit"...this tells instagram how many images to drop in.. otherwise i suppose the default is zero...
I made mine: limit: '4'
would be a pretty helpful piece of info to put into the instructions!
see below:
<script type="text/javascript">
var feed = new Instafeed({
get: 'tagged',
tagName: 'cool',
clientId: '916c01b8624d43c7b4b76369aruc86a0',
limit: '4'
});
feed.run(); </script>
Your instafeed.js file is not properly being called up.
You have put this:
<script type="text/javascript" src="path/to/instafeed.min.js"></script>
The path/to/ before the instafeed.min.js needs to actually be a working path with your website info.
The exact same code works under Windows with Chrome, FF and IE.
I just switched to Linux and this code doesn't work neither on FF or Chrome?
I tried the "style" tag, with no change in results.
Can someone help?
Is there a browser independent way of having 100% svg coverage?
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="jquery-1.11.2.min.js"></script>
<script src="snap.svg-min.js"></script>
<svg id="svgEle" height="100%" width="100%"></svg>
<script>
var snapCanvas = Snap("#svgEle");
var circle = snapCanvas.circle(100, 100, 100);
</script>
</body>
</html>
The browser is behaving correctly. If you try the HTML on Windows Chrome you get the same result.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<svg id="svgEle" height="100%" width="100%">
<circle cx="100" cy="100" r="100"/>
</svg>
</body>
</html>
The reason is as follows:
You haven't specified an actual size for the SVG. You've told it to be 100% of it's parent (<body>).
The <body> by default has width 100% and its height collapses to the height of its children.
The size of its child (the SVG) is not determinable, so the <body> height defaults to the "intrinsic size" used by browsers when it can't determine a size. That height is 150px.
So the end result is that the SVG has a size of 100% by 150px.
I feel strange that I cannot find the actual dragging-handling code in Fabric.js's demo (for example, this one), but the objects are already draggable "automatically", which is not my case. Here's my code in an external test.js file:
$(function(){
var canvas = new fabric.Canvas('c');
canvas.setWidth(window.innerWidth);
canvas.setHeight(window.innerHeight);
fabric.Image.fromURL('1.png', function(img) {
var group = new fabric.Group([img],
{
hasBorders: false,
hasControls: false,
selectable: true,
evented: true
})
canvas.add(group).setActiveObject(group);
},
{
originX: 'left',
originY: 'top'
});
canvas.renderAll();
});
And here is the test.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.3.0/fabric.min.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<canvas id="c"></canvas>
</body>
</html>
Am I missing something? Thank you.
UPDATE: solved by using the newest fabricjs (1.3.12) in github.