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.
Related
I want to be able to create multiple container. For example, by clicking a button in a new tab, a new container will be created with a new ID and the ability to draw a shape in it.
<html>
<head>
<script src="https://unpkg.com/konva#8.3.12/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<button id="add-container">Add Container</button>
<div id="tabs">
<ul>
<li>container</li>
</ul>
<div id="tabs-1">
<div id="container"></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height,
});
var layer = new Konva.Layer();
var circle = new Konva.Circle({
x: stage.width() / 2,
y: stage.height() / 2,
radius: 70,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
});
// add the shape to the layer
layer.add(circle);
// add the layer to the stage
stage.add(layer);
$( function() {
$( "#tabs" ).tabs();
} );
var count = 0
$("#add-container").click(()=>{
$(`<li><a href='#cnt-${count}'>Container-${count}</a></li>`)
.appendTo("#tabs ul");
$(`<div id='cnt-${count}'>Container-${count}</div>`).appendTo("#tabs");
$("#tabs").tabs("refresh");
count++
})
</script>
</body>
</html>
Something like this. But there must be the ability to draw shapes in each container, for example by using drag and drop in each container. I did this in my project but I can't figure out which container they should be drawn in. Can you think of a solution?
Goal:
I would like to select a color through color picker HTML element and immediately after this change I would like to see canvas element in the same color.
The issue: I can select color through the color picker, but my canvas rectangle is not changing the color. All of the questions are focused on more robust solutions (i.e. with JBOSS or jQuery or SpringBoot)
Like here:
Bootstrap colorpicker basic example does not work
Primefaces Component - colorPicker: Popup does not render,
What I tried:
Read similar questions here
Different ID names
Different method name
Different color in the white CSS class
Different browser
The different access method for canvas, see below:
function setColorAccordingToColorPicker() {
var rectangle = getElementById("canvasColorpicker");
var colorinput = document.getElementById("colorPicker");
var color = colorinput.value;
rectangle.fillStyle = color;
rectangle.fillRect(20, 20, 60, 60);
}
None of them helped.
MCVE:
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<title>Example</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<canvas id="canvasColorpicker" class="white"></canvas>
<input type="color" value="#001A57" onchange="setColorAccordingToColorPicker()" id="colorPicker">
<script src="javascript.js"></script>
</body>
</html>
Javascript
function setColorAccordingToColorPicker() {
var rectangle = getElementById("canvasColorpicker");
var colorinput = document.getElementById("colorPicker");
var color = colorinput.value;
rectangle.style.backgroundColor = color;
}
CSS
.white {
background-color: #001A57;
}
canvas {
width: 200px;
height: 100px;
margin: 10px;
border: 1px solid lighgrey;
}
Can someone help and see what's wrong? Thanks!
function setColorAccordingToColorPicker() {
var rectangle = document.getElementById("canvasColorpicker");
var colorinput = document.getElementById("colorPicker");
var color = colorinput.value;
rectangle.style.backgroundColor = color;
}
.white {
background-color: #001A57;
}
canvas {
width: 200px;
height: 100px;
margin: 10px;
border: 1px solid lighgrey;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<title>Example</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<canvas id="canvasColorpicker" class="white"></canvas>
<input type="color" value="#001A57" onchange="setColorAccordingToColorPicker()" id="colorPicker">
<script src="javascript.js"></script>
</body>
</html>
One little change needed:
Change this: var rectangle = getElementById("canvasColorpicker");
To: var rectangle = document.getElementById("canvasColorpicker");
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.
I'm starting with jQueryMobile and wanted to display a map using OpenLayers. However I'm having a weird issue. Here is the almost working code. Sorry I couldn't make a fiddle, however you can test it easily with copy/paste on notepad or whatever.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<style type="text/css">
html ,body {
margin: 0;
padding: 0;
height: 100%;
}
.ui-content {
padding: 0;
}
#pageone, #pageone .ui-content, #basicMap {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<div id="basicMap"></div>
</div>
</div>
<script>
function init() {
map = new OpenLayers.Map("basicMap", {
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.ArgParser(),
new OpenLayers.Control.Attribution()
]
});
var mapnik = new OpenLayers.Layer.OSM();
var fromProjection = new OpenLayers.Projection("EPSG:4326"); // Transform from WGS 1984
var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
var position = new OpenLayers.LonLat(7.55785346031189,50.3625329673905).transform( fromProjection, toProjection);
var zoom = 3;
map.addLayer(mapnik);
map.setCenter(position, zoom );
var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);
var marker = new OpenLayers.Marker(position);
marker.events.register("click", map , function(e){ alert("click");
});
markers.addMarker(marker);
}
$(document).on("pagecreate","#pageone",init());
</script>
</body>
</html>
This code doesn't show the map.
Now if you take off the following line :
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
You can see that the map is showing.
Any idea on how can I solve this ? because I think it can be solved easily but can't see how.
Thank you.
I knew it was stupid, if it can interest someone , the css should be like :
#pageone, #pageone .ui-content, #basicMap {
width: 100%;
height: 100%;
display : block;
}
And call JS :
$(document).ready(init());
Don't know however why this works.
I have some JS that displays and plays audio.
However the load time is very long, I following this tutorial (http://www.dzyngiri.com/show-loading-image-while-the-website-loads/) to install a preloader.
I'm seeing the preloaded image appearing, however it goes away well before the entire page is loaded.
I've tried variation between $(window).load & $(document).ready neither shows the image until the JS and audio plays.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>cal christmas tree canvas 005</title>
<style type="text/css">
#spinner {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(images/Bitmap12.jpg) 50% 50% no-repeat #ede9df;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="cal christmas tree canvas 005.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript">// <![CDATA[
$(window).load(function() { $("#spinner").fadeOut("slow"); })
// ]]></script>
<script>
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
images = images||{};
var loader = new createjs.LoadQueue(false);
loader.installPlugin(createjs.Sound);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.loadManifest(lib.properties.manifest);
}
function handleFileLoad(evt) {
if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}
function handleComplete() {
exportRoot = new lib.calchristmastreecanvas005();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
stage.enableMouseOver();
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
function playSound(id, loop) {
createjs.Sound.play(id, createjs.Sound.INTERRUPT_EARLY, 0, 0, loop);
}
</script>
</head>
<body onload="init();" style="background-color:#D4D4D4">
<div id="spinner"></div>
<canvas id="canvas" width="960" height="640" style="background-color:#FFFFFF"></canvas>
</body>
</html>
You call your init() function at the exact same time as you call your loader disappering function
<body onload="init();"
and
$(window).load(function() {} / or window.onload = function() {}
are the same thing with a different name.
You should take init() out of the onload tag and place it anywhere in your script, out of any onload events.