How can we disable resizing of billboard labels ? I have restricted the resizing of the image itself by using the sizeInMeters property. However when I zoom in or out the label associated with the billboard still scales dynamically. Is there any way to disable this.
Sandcastle link
Code copied from link above:
var viewer = new Cesium.Viewer('cesiumContainer');
var image = new Image();
var entity;
image.onload = function() {
entity = viewer.entities.add({
position : Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
billboard : {
position : Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
scaleByDistance : undefined,
sizeInMeters:true,
width:100,
height:100,
image : image
},
label : {
text : 'Label on top of scaling billboard',
font : '20px sans-serif',
showBackground : true,
horizontalOrigin : Cesium.HorizontalOrigin.CENTER,
pixelOffset : new Cesium.Cartesian2(0.0, -image.height),
pixelOffsetScaleByDistance : new Cesium.NearFarScalar(1.5e2, 3.0, 1.5e7, 0.5)
}
});
viewer.zoomTo(viewer.entities);
};
image.src = '../images/facility.gif';
var counter = 0;
viewer.scene.postUpdate.addEventListener(function(){
if(!Cesium.defined(entity)) {
return;
}
counter += 0.04;
if(Math.cos(counter) > 0){
entity.label.text = "On";
} else {
entity.label.text = "Off";
}
});
You have to set "sizeInMeters" to false.
I think you have misunderstood the meaning of "sizeInMeters".
Let's think of a building on the map.
Actually, the real size of the building in the world is constant.
But whenever we zoom in or out, the size of the building on the map(pixel coordinate) changes.
In another word, the building is drawn with different pixel sizes based on the map's scale. This is the same in your case.
You need to set label scaleByDistance property. Check this example.
Related
I have a roadmap with svg elements to represent links between two items like this :
the svg code looks like :
each time that i try to print to png, my links are not rendered:
My generation code is :
html2canvas(
document.getElementById("roadmapPrint"),
{
backgroundColor:null,
}
).then(function(canvas) {
var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
var a = document.createElement('a');
a.href = image ;
a.id = "tempAtoDelete"
a.download = "filename.png";
document.body.appendChild(a);
a.click();
let aToDelete = document.getElementById("tempAtoDelete");
document.body.removeChild(aToDelete);})
Do you have some advices ? i read that the latest version of html2canvas library is able to manage svg elements, is it the case ?
Thank you a lot for your help,
I have fixed my issue converting all svg elements to canvas before use html2canvas librairy.
This was an old solution (6 years old) but it works fine.
See my steps below:
install the version 1.5.3 of canvg librairy and import the canvg function (for information this version is dowloaded more than 140000 per week..) (there is no dependence vulnerability with the last version of node/npm/CRA)
npm install canvg#1.5.3
import canvg from 'canvg'
get all your svg element and create a canvas for each (track them to an array to delete them after)
//FOR EACH SVG ELEMENT, A CANVAS WILL BE CREATED => AT THE END WE NEED TO DELETE THEM
var svgNodesToRemove = [];
//GET ALL SVG ELEMENT
let svgElements = document.body.querySelectorAll('svg');
//LOOP ON EACH ELEMENT
svgElements.forEach(function(item) {
//YOU CAN PROCEED TO ELEMENT TREATMENT BEFORE CONVERT TO CANVAS
let children = item.childNodes
children.forEach(function(child) {
//IN MY CASE I USE ANIMATION FOR MY SVG PATH AND NEED TO FIX THE OPACITY STYLE
child.style.opacity = 1;
})
//TRIM EACH ITEM IN THE LOOP
let svg = item.outerHTML.trim();
//CREATE CANVAS FOR YOUR CURRENT SVG
var canvas = document.createElement('canvas');
//UPDATE THE NEEDED ATTRIBUTE WITH AND HEIGHT
canvas.width = item.getBoundingClientRect().width;
canvas.height = item.getBoundingClientRect().height;
//CONVERT SVG TO CANVAS
canvg(canvas, svg);
//UPDATE THE CANVAS POSITION TO THE SVG ELEMENT
if (item.style.position) {
canvas.style.position += item.style.position;
canvas.style.left += item.style.left;
canvas.style.top += item.style.top;
}
//APPEND THE CANVAS TO THE DOM
item.parentNode.appendChild(canvas);
//TRACK CANVAS TO BE DELTED AFTER
svgNodesToRemove.push(canvas)
});
I did not hidde my current svg element in the dom because there are not rendered...
now you are able to use html2canvas :
html2canvas(
document.getElementById("roadmapPrint"),
{
backgroundColor:null,
}
).then(function(canvas){
//YOUR LOGIC
//....
//DELETE SVG CANVAS
svgNodesToRemove.forEach(function(element){
element.remove();
})
}).catch((err)=>{
//DISPLAY ERROR
console.log(err)
//DELETE SVG CANVAS
svgNodesToRemove.forEach(function(element){
element.remove();
})
});
Is it possible to set an layer like imageOverlay with html markup embed in Leaflet map? Maybe with a plugin?
I tried to set it with Popup, but I need more control about the X and Y coordinates. So it isn't a solution for my case.
If you read the Leaflet tutorials on how to extend Leaflet and make plugins, and have a look at the source code for L.ImageOverlay, the answer becomes quite easy:
L.HtmlBlockOverlay = L.ImageOverlay.extend({
initialize: function(bounds, options) {
return L.ImageOverlay.prototype.initialize.call(this, null, bounds, options);
},
_initImage: function() {
var block = this._image = L.DomUtil.create('div', 'leaflet-image-layer' +
(this._zoomAnimated ? ' leaflet-zoom-animated' : ''));
if (this.options.className) { L.DomUtil.addClass(block, this.options.className); }
block.innerHTML = this.options.html;
}
});
var blockOverlay = new L.HtmlBlockOverlay(bounds, {
html: 'Hello world!',
className: 'hello-world-box'
}).addTo(map);
See a working example.
I am trying making a photo frame pattern on canvas. In which I want to put two, three or maybe more photos under an overlay frame. Where few parts of the overlay frame are transparent.
If I upload photo1 into first section of frame its visible into second section also and uploading photo2 into section two is also visible into first section. Depending on which photo is uploaded first or edited at last is overlapping the other photo.
I want to know how to hide the overflow of photo so it should not be visible into other sections. How can I achieve this?
I have done this so far:
canvas.on({
'object:moving': onChange,
'object:scaling': onChange,
'object:rotating': onChange,
});
function onChange(options) {
options.target.setCoords();
canvas.forEachObject(function (obj) {
if (obj === options.target)
return;
if (obj.id != 'cover1' && obj.id != 'cover2')
return;
if (options.target.intersectsWithObject(obj)) {
// Hide this portion
canvas.renderAll();
}
});
}
Kindly provide me the best solution
You need to apply a clipTo() method onto the image.
var canvas;
$(function(){
canvas = window._canvas = new fabric.Canvas('canvas');
var radius = 200;
fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function(img) {
img.scale(0.5).set({
left: 250,
top: 250,
angle: -15,
clipTo: function (ctx) {
ctx.arc(0, 0, radius, 0, Math.PI * 2, true);
}
});
canvas.add(img).setActiveObject(img);
});
});
This fiddle show the technique
Fiddle
I'm looking to change an image on hover in KineticJS. What happens now is that the image just appends to the layer, doesn't actually swap the image. Without removing the layer, I want to swap the image with another. Here's my code.
imgObj.onload = function () {
var image = new Kinetic.Image({
x: 10,
y: 10,
image: imgObj,
width: 28,
height: 28,
id: 'myImage'
});
image.on("mouseenter", function (e) {
document.body.style.cursor = 'pointer';
imgObj.src = 'myHoverImage.png';
layer.draw();
});
image.on("mouseleave", function () {
document.body.style.cursor = 'default';
imgObj.src = 'myImage.png';
});
Use .setImage on the Kinetic.Image to swap to a different image:
Preload both images into image objects with var hoverImage=new Image() ... and var blurImage=new Image() ....
Important: Be sure both images have fully loaded using the .onload method of the image objects.
In the event handlers, swap images with image.setImage(hoverImage) or image.setImage(blurImage).
Display the swapped image with layer.draw().
I read that you can resize (and transform in general) a wrapped swing component which can be obtained with SwingComponent.wrap(myComponent). I fail to see how. I see that the returned type does inherit Resizable, but how do I set min/maxHeight, h/vfill and other properties?
This is not the best solution but it works. Below is sample code:
// Define the swing component, wrapper, and the scene.
var jPanel = new JPanel();
var swingWrapper = new SwingComponent.wrap(jPanel);
var scene = Scene{
width: 700
height: 500
content: [
swingWrapper
]
}
// Below are some triggers that fire off whenever the width or
// height of the scene change.
var currentWidth = bind scene.width on replace{
jPanel.setPreferredSize(new Dimension(scene.width,
scene.height));
swingWrapper.width = scene.width;
}
var currentHeight = bind scene.height on replace{
jPanel.setPreferredSize(new Dimension(scene.width,
scene.height));
swingWrapper.height = scene.height;
}
Stage {
title: "Some App"
scene: scene
}
Below is an example of how you could set the properties you require:
def swingComponent : SwingComponent = SwingComponent.wrap(new JPanel());
function setSwingComponentLayoutInfo():Void{
swingComponent.layoutInfo = LayoutInfo{
height: 200
width: 200
maxHeight: 400
maxWidth: 400
// ... other properties.
}
}
setSwingComponentLayoutInfo();
Hope that helps.