I do want to display some text inside 3D box image using aframe in ar.js.
Following is the HTML code
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/examples/vendor/aframe/build/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js"></script>
<!-- <script>THREEx.ArToolkitContext.baseURL = 'https://rawgit.com/jeromeetienne/ar.js/master/three.js/'</script> -->
</head>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs='trackingMethod: best;'>
<a-anchor hit-testing-enabled='true'>
<a-box position='0 0.5 0' material='opacity: 0.5;'>
<a-entity text="value: HELLO"></a-entity>
</a-box>
</a-anchor>
<a-camera-static/>
</a-scene>
</body>
</html>
My main task is to project some dynamic text inside the 3D box. But for instance, I am trying to put some static text. But unable to do so. Does anybody know how can I add text inside the box?
actually Your code is working, but both the box, and text are white + the text is really small:
If You enlarge it a bit + make it black, it would be apparent, that it is there:
<a-entity position="1 0 0" scale="3 3 3" text="value: HELLO;color:black"></a-entity>
Related
When building my website, i faced an image with some text in it.
But the text only display when i changed background-color to black.
After some research, i think ít's a transparent image, and we have some online tools to replace background image.
Anyone know how remove background from an image really work ?
And why it make the text showed up ?
This is my image.
updated: Sorry, my question is not clear. Here is my code
https://codepen.io/ging2507/pen/wvWJeyR
when i remove comment of navbar, the Text of image show up(not the normal text 123131). And i dont know why this happened
.navbar {
background-color: #14425D;
}
The image doesn't change at all. It just has some pixels that are marked as transparent.
Consider a sheet of glass. Paint on it using white paint. Put it on a sheet of white paper. Now you can't see what was painted on it. Replace the white paper with black paper. Not you can see what was painted on it.
I am not sure if I understand your question correctly. You have an image that you want to remove the grey background from? I have tried to use this tool and this is the following output that I got. The text cannot be read since it is it white and blends together with the background. I hope this helped
Edit: The tool that I have posted can also replace the background as you can see here
EDIT
You can also use CSS to add background to the image.
I have mananged to add linear gradient to the image using CSS. You can see the code
.logo {
background: linear-gradient(
105deg,
rgba(34, 193, 195, 1) 0%,
rgba(253, 187, 45, 1) 100%
);
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=">
<title></title>
</head>
<body>
<img src="https://i.stack.imgur.com/Pawab.png" alt="some logo" class="logo">
</body>
</html>
Here is a link to codepen if you want to play around with it.
On my iPhone 7 in Safari a 3in wide div is about 1.8in in real.
Why didn't they set devicePixelRatio so that 3in in css are 3in in real?
Is there a specification on how to set devicePixelRatio?
Is there a workaround?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
</head>
<body style="margin:0">
<div style="width:3in;background:orange">3in</div>
</body>
</html>
The CSS units such as inch and cm are not recommended to use according to w3.org, except you're planning to print out your webpage:
The only place where you could use pt (or cm or in) for setting a font size is in style sheets for print, if you need to be sure the printed font is exactly a certain size. But even there using the default font size is usually better.
If you really need to use inches as units, please take a look at this answer here
I'm working on application for designing t-shirts on using fabricjs javascript library. T-shirt template(png) is positioned absolute to canvas. So when the canvas is rasterized to SVG, objects on canvas get saved.
I'm currently storing SVG data on database for displaying purpose. When the process of designing t-shirt is completed, it needs to be saved as vector image so that while zooming, it persists it's original quality. How this can be done?
Or how the system like this saves high quality images?
FabricJS's canvas.toSVG is a very nice feature that takes the drawing commands that created your canvas content and converts them into a fully formed svg element.
For example, this code creates green rectangle on the canvas and then uses canvas.toSVG to convert it into a fully formed svg element.
canvas.add(new fabric.Rect({
left: 50,
top: 50,
height: 20,
width: 20,
fill: 'green'
}));
console.log(canvas.toSVG());
This is what the resulting svg element looks like:
<?xml version="1.0" standalone="no" ?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="800" height="700" xml:space="preserve"><desc>Created with Fabric.js 0.9.21</desc><rect x="-10" y="-10" rx="0" ry="0" width="20" height="20" style="stroke: none; stroke-width: 1; stroke-dasharray: ; fill: green; opacity: 1;" transform="translate(50 50)" /></svg> </body>
As an SVG element, it can be scaled by the client with little loss of clarity.
Since FabricJS gives you a fully formed svg element, all you have to do is tell your server to include that svg element in the DOM of the webpage being served to the client.
It's literally as simple as this (this SVG rectangle scales with little loss of clarity).
<!doctype html>
<html>
<body>
<!-- This is the exact SVG produced by canvas.toSVG and which was saved in your DB -->
<?xml version="1.0" standalone="no" ?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="800" height="700" xml:space="preserve"><desc>Created with Fabric.js 0.9.21</desc><rect x="-10" y="-10" rx="0" ry="0" width="20" height="20" style="stroke: none; stroke-width: 1; stroke-dasharray: ; fill: green; opacity: 1;" transform="translate(50 50)" /></svg> </body>
</html>
I've been toying around with iPad and HTML5 but since the display is retina, the text on my screen seems to be of low resolution. As do lines drawn with lineTo/moveTo/stroke. Note the text is drawn with context.fillText()
I suspect this is just because I haven't set up the canvas correctly to handle the retina pixel ratio, so hopefully someone here can figure out what exactly I'm doing wrong.
I have set up the canvas as follows:
<div id="container">
<canvas id="canvas"></canvas>
</div>
With CSS attributes:
#canvas {
width: 1024px;
height: 768px;
}
#container {
width: 1024px;
height: 768px;
}
and in JavaScript (as I have seen to do on the internet) I have specified:
canvas.width = 2048;
canvas.height = 1536;
Unfortunately this does not stop the pixelation as it has for some other users.
Am I missing something or have I specified something incorrectly?
Try adding this line to your page head:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
This tag makes sure that the page is shown in its original size, and remains in that size.
I have a simple HTML5 webapp that uses javascript to create a canvas context and draw a simple image of a caret (^) which is then referenced in the definition of a CSS class to render the image on multiple tags.
The application displays fine in a browser: have tried Google Chrome (Win7), Mobile Safari (iPad IOS4 & IOS5, iPod (IOS4 & IOS5).
But if on the iPad or iPod I "Add to Homescreen" and then launch the webapp the ^ image is not rendered onto the .
I am aware there are differences in the way HTML5 is rendered when launched from the homescreen as opposed to viewed in Safari, but my searches haven't turned up anything that would indicate that this shouldn't work.
I would appreciate if anyone could shed some light on this for me.
Code sample below:
**(index.html)**
<html>
<head>
<link rel="stylesheet" href="styles/main.css" >
<script src="scripts/main.js"></script>
</head>
<body>
<div class="scoreboard-item-wrapper">
<div class="scoreboard-item">
<div class="box" ><button id="btn_homegoalup" class="up" onclick="incAction(true,true)"></button>
</div>
</div>
</div>
</body>
</html>
**(main.js)**
initChevronUp("chevron-up", "hsl(228, 1%, 50%)");
function initChevronUp(id, style) {
var context = document.getCSSCanvasContext("2d", id, 22, 13);
context.save();
context.translate(4,0);
context.clearRect(0, 0, 20, 13);
context.strokeStyle = style;
context.lineWidth = 3;
context.beginPath();
context.moveTo(1, 9);
context.lineTo(6.5, 1);
context.lineTo(12, 9);
context.stroke();
context.restore();
}
**(main.css)**
.scoreboard-item .box button.up{
background:
-webkit-gradient(linear,left top, left bottom,
from(rgba(255, 255, 255, .25)), to(transparent) ),
-webkit-canvas(chevron-up) center center no-repeat transparent;
}
try to write the full URL for CSS and javascript files.
The relative path you have is getting safari to look for files locally.