I used the amChart4 Map before and have just switched to amChart5 Map. I know there is a document about disabling zoom and pan on map chart of amChart4, but I can't find any about amChart5.
So I've tried to apply the same concept to amChart5 and it worked only with Zoom. I could disable the map zoom in amChart5 with this code:
var map = root.container.children.push(am5map.MapChart.new(root, {
panX: "none",
projection: am5map.geoMercator(),
maxZoomLevel: 1,
draggable: false,
resizeable: false
})
);
As code shown above, I also added the draggable: false and resizeable: false into it, but it didn't work.
Is there any solution to disable the draggable and resizeable map? I appreciate your kind help.
It is my own question, but after I did some testing on the mentioned code above and found the right solution, so I would like to share it here in the answer.
The solution to the question is just by adding
var map = root.container.children.push(am5map.MapChart.new(root, {
panX: "none",
panY: "none",
projection: am5map.geoMercator(),
maxZoomLevel: 1
})
);
So the panX: none is to disable the horizontal drag and panY: none is to disable the verticle drag. And the draggable: false and resizeable: false are no longer applied in amChart5 anymore.
Related
I use svg as texture in threee.js, I've already set antialias: true, but still not working perfect,
// RENDERER
renderer = new THREE.WebGLRenderer({
antialias: true, //是否开启反锯齿
precision: "highp", //着色精度选择
alpha: true, //是否可以设置背景色透明
premultipliedAlpha: true,
stencil: false,
preserveDrawingBuffer: true, //是否保存绘图缓冲
maxLights: 1 //maxLights:最大灯光数
});
renderer.setPixelRatio(window.devicePixelRatio);
this is svg:
this is texture on 3d model:
could anybody help me?
thanks!
When an image is loaded into a 3d environment it is not pixels but defined as texels. Texels are translated to the space available on a face as set by the UV coordinates. The original image is sampled according to the sample method you supply. Some result in specifically blocky looks. Think minecraft. Others are very smooth and especially blurry when zoomed in. Think older video games.
To determine the sample method of your original image you can set the sample technique in the magnification and minification properties of the texutre.
Try
mySVG = new THREE.TextureLoader().load('assets/images/icons/mySVG.svg');
mySVG.magFilter = THREE.NearestFilter;
mySVG.minFilter = THREE.LinearMipMapLinearFilter;
Various filters are available and documented at https://threejs.org/docs/api/textures/Texture.html
When editing content that includes a table in ckeditor, it shows a border around table cells even though there is no border in the markup. This seems to be a convenience feature, so I'd like to be able to toggle it, perhaps via a checkbox in the toolbar. Is this possible? Perhaps there is a plugin of some sort that I have not configured? Thanks for your help.
Screen shot of table borders
This this best example to hide table border. Key player is : startupShowBorders: false,
$(function () {
var editor = CKEDITOR.replace("textarea", {
width: 750, height: 500, fullPage: true,
extraPlugins: 'stylesheetparser',
allowedContent: true,
qtBorder: '0',
startupShowBorders: false,
////pasteFilter: 'semantic-content',
//// Custom stylesheet for editor content.
//// contentsCss: ['content/css/html-email.css'],
//// Do not load the default Styles configuration.
stylesSet: []
});
});
I currently have an Openlayers 3 integration with many updating features, these make the scrolling stutter, especially when the 'kinetic' movement (flick scroll) is used. Is there a way to turn that smooth scrolling with inertia off so the user has to drag to move the map?
Removing the animation on zoom would help too.
I've been looking in the ol.animation area for these - is that the right place?
The kinetic can be turned off in the ol.interaction.DragPan interaction. Removing the animation while zooming can be done by passing duration: 0 to the ol.interaction.MouseWheelZoom.
See a live example here: http://jsfiddle.net/9v6fd6as/1/
Here's the example source code:
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
interactions: ol.interaction.defaults({
dragPan: false,
mouseWheelZoom: false
}).extend([
new ol.interaction.DragPan({kinetic: false}),
new ol.interaction.MouseWheelZoom({duration: 0})
]),
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
Above answer from Alexandre Dube is correct for older versions of openlayers.
If you're using OpenLayers 6+ with TypeScript, this is how you can disable animated panning:
import Interaction from "ol/interaction/Interaction";
import DragPan from "ol/interaction/DragPan";
import {defaults as defaultInteractions} from 'ol/interaction.js';
import {Kinetic} from "ol";
// ...
ngOnInit() {
this.map = new Map({
//...
interactions: defaultInteractions({
dragPan: false
}).extend([new DragPan({kinetic: new Kinetic(0, 0, 0)})]),
//...
});
}
I have jqplot donut chart where I want to add chart labels in the center part. Also want to add scrolling for labels in the middle of graph. So only 1-2 labels in the center will be visible and rest will be visible when user scrolls.
Please have a look attached image. As per my knowledge, we can't add labels in the center of chart. Is there any way to do this? Appreciate your help.
My current code is as below:
<script type="text/javascript">
var _chart5_plot_properties;
_chart5_plot_properties = {
title: " ",
"seriesDefaults":{
renderer:$.jqplot.DonutRenderer,
rendererOptions:{
sliceMargin: 0,
innerDiameter: 220,
startAngle: -90,
barPadding: 0,
padding: 3,
}
},
grid: {
shadow: false,
drawBorder: false,
shadowColor: "transparent"
},
highlighter: {
show: true,
tooltipLocation: "sw",
useAxesFormatters:false
}
}
plot2 = $.jqplot("chart2", chart_data, _chart5_plot_properties);
I couldn't find an option for this in jqPlot.
Though, jqPlot has 8 options to position the legend, but it does not have the center option. jqPlot Legend Locations
But after tweaking it a bit, I could accomplish it using jQuery. Since we need to require jQuery to render/draw jqPlot charts, so I thought of using jQuery rather than pure Javascript.
I have used two functions defineDimensionsForLegendTable(parentContainerID, dimensions) and fixLegendsToCenter(parentContainerID)
Other important things that you should not miss out while using these functions
Make sure you include the jquery.jqplot.js, jqplot.pieRenderer.js, jqplot.donutRenderer.js, jquery.jqplot.css files (or the minified versions - .min.js)
Set placement to outsideGrid in legendOptions
legend: { show:true, placement: 'outsideGrid' }
Give a higher z-index to the legend-table
#chart2 .jqplot-table-legend{
z-index: 99999;
}
Find the working fiddle here - jqPlot Donut Chart with legend in the center
Note: If the chart does not show up in Google Chrome, try opening it in Firefox or some other browser.
Remove the console.log lines from the code ;-)
You can use Foundation or Bootstrap to beautify the scrollbar. :-)
Hope it helps :-)
I've implemented the following within my keno grid:
jsfiddle.net/JBeQn/
What I would like to achieve is this; When the user drags a row, any rows beneath it will change style as the dragged row passes over it.
Does anyone have an example of how this can be achieved?
Thanks,
I hope I'm understanding you right but would this be of help to you?
http://demos.kendoui.com/web/grid/foreignkeycolumn.html
http://demos.kendoui.com/web/grid/column-reordering.html
reorderable: true,
resizable: true,
groupable: true,