When using kineticjs, how do i simulate the behavior of a div box with specified height and width with overflow:hidden, that when the text goes beyond the height of the div box, the remainding text is hidden.
See http://jsfiddle.net/8t9QV/, when my height is set to 1, the first line "Complex Text" is still displayed?!
What is the behavior of height and width in kinetic.Text?
You can put your text in a Kinetic.Group container and then set that group's clip property to prevent your text from overflowing outside the group:
Here's code and a Fiddle: http://jsfiddle.net/m1erickson/M5m8P/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
<style>
body{padding:20px;}
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:350px;
height:350px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 350,
height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);
var group=new Kinetic.Group({
width:100,
height:50,
clip:[0,0,100,50]
});
layer.add(group);
var rect= new Kinetic.Rect({
x:0,
y:0,
width:group.getWidth(),
height:group.getHeight(),
fill:"skyblue"
});
group.add(rect);
var text = new Kinetic.Text({
x:5,
y:20,
text:"Rudolph the Red Nosed Reindeer...",
fill: 'red',
});
group.add(text);
layer.draw();
$("#myButton").click(function(){});
}); // end $(function(){});
</script>
</head>
<body>
<button id="myButton">Button</button>
<div id="container"></div>
</body>
</html>
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'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!
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.