I'm trying to include text in an SVG using the <text> element, but some reason when I do, it cuts the end off. I'm using moJS to do this. I tried adding the overflow: visible and still no luck. Below is the output:
class TaskText extends mojs.CustomShape {
getShape() {
return '<text x=0 y=35 font-size="10"><tspan style="font-weight: bold; overflow: visible">Commit changes to GitHub </tspan></text>';
}
}
mojs.addShape('tasktext', TaskText);
const text = new mojs.Shape({
shape: 'tasktext',
radius: 300,
x: -30,
scale: 0.4,
fill: 'black',
isShowStart: true,
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/mojs/latest/mo.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Custom</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/mojs/latest/mo.min.js"></script>
</body>
</html>
I can fix the look by manually increasing the width of the <div> that the SVG is nested on but I can't think of a way to target it. Is there a way to do this in SVG/JavaScript?
Thanks!
Related
I am starting to learn Anime.JS. To see how it worked, I copied some very basic sample code from their documentation website. Weirdly, the square is not animating to the right 250px like it should be...
HTML:
<!DOCTYPE html>
<html lang="en-us">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="anime.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="cssSelector">
<div class="line">
<div class="square el"></div>
</div>
</div>
</body>
</html>
CSS:
body{
background-color: #232323;
}
.square{
width: 100px;
height: 100px;
background-color: red;
}
And Javascript
var cssSelector = anime({
targets: '#cssSelector .el',
translateX: 250
});
I see the square but there is no animation. The program does read the anime.min.js because there is no error message in the console.
What I believe is that you are trying to run your code before the page is loaded.
Add this:
function main(){
anime({
targets: '#cssSelector .el',
translateX: 250
});
}
document.addEventListener("DOMContentLoaded", main);
Then it should work: https://jsfiddle.net/DerekL/980j4591/
I am very new to JS and HTML so please bear with me.
I have a static image (in .jpg format) which is a kind of diagram containing 32 different circles. They are each numbered 1 - 32 however I am not able to manipulate the image in the sense that I cannot move the circles or change the numbers inside of them.
For the sake of simplicity, I have included an image below containing circles - this represents the image that I have.
My first objective is to make this image a thumbnail that, when clicked, expands to cover most of the page.
The following JQuery code serves this purpose:
$("#thumbnailImage").click(function() {
$(this).attr('width', '400');
$(this).attr('height', '300');
I have inserted this into my code:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.15.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.15.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
#panel{ position: absolute; bottom: 10px; right: 10px; z-index: 1010101; display: block; width: 400px; height: 400px; overflow-y: auto; background: rgba(255,255,255,0.1); color: white;}
</style>
</head>
<body>
<div id='map'></div>
<div id = 'panel'>
<img id = "thumbnailImage" src="http://iskandarblue.github.io/mapbox/data/circles_page.jpg" width="350" height="250" alt="circles"/>'
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiaXNrYW5kYXJibHVlIiwiYSI6ImNpazE3MTJldjAzYzZ1Nm0wdXZnMGU2MGMifQ.i3E1_b9QXJS8xXuPy3OTcg';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/dark-v8', //stylesheet location
center: [-74.50, 40], // starting position
zoom: 9 // starting zoom
});
$("#thumbnailImage").click(function() {
$(this).attr('width', '400');
$(this).attr('height', '300');
});
</script>
</body>
</html>
In this example, the image expands in the wrong direction (it expands outward rather than inward), and does not collapse again when clicked twice. Is there an easy way to fix this ?
Now, once the image has expanded, I would like the user to be able to hover over a circle and see a popup text much like what the tipsy jQuery plugin does (see here): http://onehackoranother.com/projects/jquery/tipsy/
I am not sure how to proceed or how to conceptualize the problem. What's the easiest way to assign pop-up functions to circles on a static image and how can these popups (or tooltips) be activated only when the image is in expanded mode? Any advice would be appreciated.
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.
I'm currently looking into KonvaJS to create like a scrap booking app, and i'm trying to display like a bullet list.
I trying to use a Text shape and add html to the text to see if it will render it, but no luck.
Is this even possible? If so, how? If not, what other ways does KonvaJS have to display fancy text, like lists, bold ext...
var text = new Konva.Text({
text: '<div>this is normal text\n\n <b>This is BOLD</b> </div>',
fontSize: 8,
fontFamily: 'Calibri',
fill: '#555',
width: 300,
padding: 20,
align: 'center',
stroke: 'black',
strokeEnabled: false,
strokeWidth: 0
});
Output:
Sorry, I don`t have enough reputation to post images, but the output text is:
<div>this is normal text
<b>This is BOLD</b> </div>
I want it to be something like:
this is normal text
This is BOLD
Any help appreciated, thanks!
Actually you can load many icons from font-awesome, and make beautiful web apps:
window.onload = function () {
var stage = new Konva.Stage({
container: 'container',
width: 1000,
height: 1000
});
var layer = new Konva.Layer();
var simpleText = new Konva.Text({
x: stage.getWidth() / 10,
y: 15,
text: "\uf21c",
fontSize: 300,
fontFamily: 'FontAwesome',
fill: 'green'
});
layer.add(simpleText);
stage.add(layer);
}
#font-face {
font-family: 'FontAwesome';
src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/fonts/fontawesome-webfont.ttf');
font-weight: normal;
font-style: normal;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css"/>
<script src="https://cdn.rawgit.com/konvajs/konva/0.11.1/konva.min.js"></script>
<title>JS Bin</title>
</head>
<body>
<div id="container" style="font-family:'FontAwesome'">dummyText</div>
</body>
</html>
here is a reference for the solution https://stackoverflow.com/a/35581429/3530081
Konva can't draw html into canvas. You may use different style options for text such as: fontFamily, fontSize, fontStyle, fontVariant (see docs).
Or you can convert html data into image (or canvas element) with html2canvas, then draw result via Konva.Image.
The JSTween library doesn't seem to perform a simple animation pulled from the library's tutorial. Using the following code, the alert box will show up after the allotted 1 second duration, but no animation will take place.
I must have set up the library wrong somehow, but I can't see the problem.
<html>
<head>
<style type="text/css">
#box
{
width: 16px;
height: 16px;
}
</style>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="jstween-1.1.js" ></script>
<script type="text/javascript" src="jstween-1.1.min.js" ></script>
<script type="text/javascript">
function animate()
{
$('#box').tween({
width:{
start: 16,
stop: 200,
time: 0,
units: 'px',
duration: 1,
effect:'easeInOut',
onStop: function(){ alert( 'Done!' ); }
}
}).play();
}
</script>
</head>
<body>
<div id="box">
<img src="image.png" onClick="animate()" />
</div>
</body>
</html>
Additional info: using Safari on 10.7.5. Code does not work in Chrome or Firefox either.
For anyone who may read this in the future, I discovered the problem: the CSS element #box needs position: relative; as an attribute, otherwise the browser will hold the element in place by default.