I need to load 1.svg from a local folder. In the following code, when I replace fabric.loadSVGFromURL("http://fabricjs.com/assets/1.svg" with fabric.loadSVGFromURL("1.svg", the image no longer displays in canvas. What am I doing wrong? What is the correct code?
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<style>
body{ background-color: ivory; }
canvas{border: 1px solid red; }
</style>
<script>
$(function(){
var canvas = new fabric.Canvas('canvas');
var group = [];
fabric.loadSVGFromURL("http://fabricjs.com/assets/1.svg",function(objects,options) {
var loadedObjects = new fabric.Group(group);
loadedObjects.set({
left: 100,
top: 100,
width:175,
height:175
});
canvas.add(loadedObjects);
canvas.renderAll();
},function(item, object) {
object.set('id',item.getAttribute('id'));
group.push(object);
});
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width="900" height="900"></canvas>
</body>
</html>
Chrome's security model doesn't allow it. You can run with the command line option --allow-file-access-from-files to override this.
Is this file hosted on a server ? If its not, once you host the html file in a server it will display the svg image. The svg file need to be in the same folder under the website where you place the html file.
Related
I have created a smaple electron application to try p5.speech. But that is not working and I am not seeing any error in console.
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello p5.js!</title>
<script language="javascript" type="text/javascript" src="libraries/p5.js"></script>
<script language="javascript" src="libraries/p5.dom.js"></script>
<script language="javascript" src="libraries/p5.sound.js"></script>
<script language="javascript" src="libraries/p5.speech.js"></script>
<script language="javascript" type="text/javascript" src="my_speech.js"></script>
<!-- this line removes any default padding and style. you might only need one of these values set. -->
<style> body {padding: 0; margin: 0; background: #000000; overflow-x:hidden; overflow-y: hidden} </style>
</head>
<body>
</body>
<script>
// You can also require other files to run in this process
require('../renderer.js')
</script>
</html>
my_speech.js
function setup() {
noCanvas();
let lang = navigator.language || 'en-US';
let speechRec = new p5.SpeechRec(lang, gotSpeech);
let continuous = true;
let interim = false;
speechRec.start(continuous, interim);
function gotSpeech() {
console.log(speechRec);
if (speechRec.resultValue) {
createP(speechRec.resultString);
}
}
}
This setup is working fine in browser. How can I make it work in electron application?
I'm having a problem with the pixi.js "Building a Parallax Scroller with Pixi.js: Part 1" tutorial.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Parallax Scrolling Demo</title>
<style>
body { background-color: #000000; }
canvas { background-color: #222222;}
</style>
</head>
<body onload="init();">
<div align= "center">
<canvas id= "game-canvas" width= "512" height="384"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.0.0/pixi.min.js" ></script>
<script>
function init() {
stage = new PIXI.Container();
renderer = PIXI.autoDetectRenderer(512,384, {view:document.getElementById("game-canvas")});
var farTexture = PIXI.Texture.fromImage("resources/bg-far.png");
far = new PIXI.Sprite(farTexture);
far.position.x = 0;
far.position.y = 0;
stage.addChild(far)S
renderer.render(stage);
}
</script>
</body>
</html>
I can't get my images to render.
When constructing files in Microsoft, it is important to go back into Properties-->Security and make sure your permission settings match (for each file).
Additionally, in order to avoid a CORS error it is also important to use Administration settings; Specifically settings in the IIS or Internet Information Services.
Here, you will need to examine and adjust your permission settings.
I am trying to make a HTML code player in which you enter html and get result in iframe. it works good if i only use textarea and output in iframe. but if i use code mirror and try putting coremirror value into iframe it shows me code in iframe instead of showing me result.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="codemirror/codemirror/lib/codemirror.js"></script>
<link rel="stylesheet" href="codemirror/codemirror/lib/codemirror.css"/>
<link rel="stylesheet" href="codemirror/codemirror/theme/neo.css">
<script src="codemirror/codemirror/mode/javascript/javascript.js"></script>
<script src="codemirror/codemirror/mode/css/css.js"></script>
<script src="codemirror/codemirror/mode/htmlmixed/htmlmixed.js"></script>
<script src="codemirror/codemirror/addon/hint/show-hint.js"></script>
<script src="codemirror/codemirror/addon/hint/css-hint.js"></script>
<link rel="stylesheet" href="codemirror/codemirror/addon/hint/show-hint.css">
<style>
body {
background-color: #eee;
}
iframe{height:600px;width:400px}
</style>
</head>
<body>
<div id="codeeditor"></div>
<iframe>Example</iframe>
<button>RUN</button>
<script>
var editor = CodeMirror(document.getElementById("codeeditor"), {
value: "<html><body><h1>Helloworld</h1></body></html>",
mode: "css",
theme: "neo",
extraKeys: {"Ctrl-Space": "autocomplete"}
});
$("button").click(function(){
$("iframe").contents().find("body").html($("#codeeditor").html());
})
</script>
</body>
</html>
Do not take editor contents using jQuery, instead use codemirror method getValue like this:
$("button").click(function(){
$("iframe").contents().find("body").html(editor.getValue());
})
I was trying to implement like similar website.
http://printio.ru/full_print_tees/new
Even i tried answer of following post but it is not working.Does any one have the solution or fiddle.
Fabric.js Clip Canvas (or object group) To Polygon
I have create following example but it is not working similar. Please let me know what is problem
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="fabric.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border: 1px solid red; }
</style>
<script>
$(function(){
var canvas = new fabric.Canvas('canvas');
var group = [];
fabric.loadSVGFromURL("http://fabricjs.com/assets/2.svg",function(objects,options) {
var loadedObjects = new fabric.Group(group);
loadedObjects.set({
left: 100,
top: 100
});
canvas.add(loadedObjects);
shape = canvas.item(0);
canvas.remove(shape);
canvas.clipTo = function(ctx) {
shape.render(ctx);
};
canvas.renderAll();
},function(item, object) {
object.set('id',item.getAttribute('id'));
group.push(object);
});
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>
Hello are you looking something like this on my example?
load one image (t-shirt)
add i-text object
manipulate text object (edit,move up/down/left/right) on the t-shirt
small snippet:
fabric.Image.fromURL(myImg, function(myImg) {
var img1 = myImg.scale(scaleFactor).set({ left: 0, top: 0 });
var text = new fabric.Text('the_text_sample\nand more', {
fontFamily: 'Arial',
fontSize:20,
});
text.set("top",myImg.height*scaleFactor-myImg.height*scaleFactor+150);
text.set("left",myImg.width*scaleFactor/2-text.width/2);
var group = new fabric.Group([ img1,text ], { left: 10, top: 10 });
canvas.add(group);
console.log(canvas._objects[0]._objects[1].text);
});
live example : https://jsfiddle.net/tornado1979/zrazuhcq/
Hope helps,good luck.
guys!
I have a problem.
I want create on, two or more rectangles in a space proportionally.
So, a have the canvas in 600x800px and I have a rectangle in 200x400px, I need when I click in a button, create more one rectangle in the some space of other. staying, 100x200 and 100x200 for both rectangles.
Some one?
Thanks!
All you have to do is:
Keep a Y-coordinate variable,
Draw your next rectangle at that Y,
Increment Y by the rectangle height (plus any spacing between rects that you desire)
Here's code and a Demo: http://jsfiddle.net/m1erickson/czMXH/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
#canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var y=10;
var spacer=8;
$("#again").click(function(){
ctx.fillStyle=randomColor();
ctx.fillRect(10,y,100,66);
ctx.strokeStyle="black";
ctx.strokeRect(10,y,100,66);
y+=66+spacer;
});
function randomColor(){
return('#'+Math.floor(Math.random()*16777215).toString(16));
}
}); // end $(function(){});
</script>
</head>
<body>
<button id="again">Add</button><br>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>