So I am trying to build a game with pixel art in html using jCanvas. However, when I try to disable imageSmoothing in order to leave the pixels sharp, nothing happens.
$(function() {
$('canvas').drawImage({
source: 'http://i.imgur.com/Y2o59.png',
x:400, y:250,
width: 160, height: 160,
imageSmoothingEnabled: false,
});
});
Edit: Added random piece of pixel art to make it easier to test.
Figured it out.
First of all, its imageSmoothing: false, not imageSmoothingEnabled: false.
Second, you still need to enable smoothing on the context, like this:
var ctxbgd = document.getElementById('background').getContext("2d");
ctxbgd.imageSmoothingEnabled = false;
ctxbgd.webkitImageSmoothingEnabled = false;
ctxbgd.mozImageSmoothingEnabled = false;
There, no smoothing.
Related
I have a bxSlider. I want that on reaching the last slide the next control should hide. I am using infiniteLoop to stop from looping back to the first slide. Using 'hideControlOnEnd' hides the previous control as well but I'd like to keep that. How to achieve this functionality? Is there any direct way to achieve this instead of writing long lines of code?
slider configuration -
$slider = $('.slider').bxSlider({
pager: false,
auto: true,
moveSlides: 4,
minSlides: 4,
maxSlides: 4,
auto:false,
infiniteLoop:false
})
I am trying something like -
function onSliderLoad (){
$(document).on('click','.bx-next', function() {
var current_slide = $slider.getCurrentSlide();
//console.log(current_slide);
var slide_count = $slider.getSlideCount();
//console.log(slide_count);
if (current_slide == slide_count){
$('.bx-next').addClass('disabled');
}
});
}
I am calling this function on click of next-button. I have total of 6 slides. current_slide is returning me 1. The logic is not fitting correctly. Can anyone please suggest any solution?
Thanks in advance !
EDIT : Found a better solution at -https://stackoverflow.com/questions/14122047/bxslider-get-first-and-last-slide
This helped me achieve the desired result.
Try something like this...
onSliderLoad: function (){
slider = $('.slider').bxSlider();
var slide_count = slider.getSlideCount();
var slide_curr = slider.getCurrentSlide();
}
if (slide_curr == slide_count-1){
$('.bx-prev').addClass('disable');
}
Friends of the Internets,
Google Docs's Intert Drawing tool works, except for the fact that it wastes half of all 16:9 screens, since it opens a forced-square window that is UNRESIZABLE, cripling all drawings that are intended for LANDSCAPE and/or PORTRAIT format! Think of all the standard formats like A4, A3, 16:9 monitors.
I've been asking this quetsion to super users, to no avail. NOBODY seems to know the answer! I'm resorting to skilled programmers to hack our way into this and am planning on opening a bounty worth 500 as soon as this this becomes available for this question! This is an essential yet overlooked potential portion of Google Docs that has been overlooked.
Any and all solutions that make this work in Google's own browser Chrome will be:
Awarded 500 bounty points
Accepted as answer
I think the simplest way is make a Chrome Extension Plugin for solve this problem. I made an example of how you should work, of course, a rudimentary but for the purpose is ok. Check it on github (Download the zip, unpack, go to chrome extensions and => "Load unpacked", enjoy :D). For more complex solutions you need to use google document api.
Example of code
document.addEventListener('DOMContentLoaded', function () {
let fullScreenBtn = document.getElementById('fullScreenBtn');
fullScreenBtn.onclick = function (element) {
function modifyDOM() {
function setToFullScreen(iteration, drawer) {
drawer.style.left = '0';
drawer.style.top = '0';
drawer.style.borderRadius = '0';
drawer.style.width = '100%';
drawer.style.height = '100vh';
document.getElementsByClassName('modal-dialog-content')[iteration].style.height = '100vh';
var iframe = drawer.getElementsByTagName("IFRAME")[0]
iframe.width = '100%';
iframe.height = '100%';
var canvas = iframe.contentWindow.document.getElementById('canvas-container');
canvas.style.borderLeft = 'solid 2px red';
canvas.style.borderRight = 'solid 2px red';
}
var drawers = document.getElementsByClassName('modal-dialog');
let drawerCount = drawers.length;
if (drawerCount) {
for (let i = 0; i < drawerCount; i++) {
setToFullScreen(i, drawers[i]);
}
} else {
alert('First off all open the drawer!')
}
return document.body.innerHTML;
}
chrome.tabs.query({ active: true }, function (tabs) {
var tab = tabs[0];
chrome.tabs.executeScript(tab.id, {
code: '(' + modifyDOM + ')();'
}, (results) => {
// console.log(results[0]);
});
});
};
If you want, you can resize the drawing canvas also, but if you do, it make some bugs (like #Anthony Cregan said) ...
You can do with changing the code in this section
var canvas = iframe.contentWindow.document.getElementById('canvas-container');
canvas.style.left = '0';
//canvas.style.position = ''; // works but in resizing elemnts bug
canvas.style.minWidth = '100%';
In action
I acheived this by opening in chrome, pressing F11 (fullscreen), F12 (console). I then navigated the dom in the Elements tab to:
#canvas-container
then set the element styles manually
left: 41px
width: 1787px
EDIT: unfortunately subsequent edits seem to reset the styles you enter manually, there may be a way to enforce these after subsequent draw actions but for now this solution is only good for displaying the end result, not drawing full-screen.
EDIT EDIT: you can enforce these by adding them to the element in the styles sidebar and maintain them with !important but this causes the draw functions to lose their co-ordinates (pen tool draws away from the pointer along the x-axis for instance).
Boom! As you said it's a hack. But this works:
F12->Console->Paste->Enter
let modal = document.getElementsByClassName("sketchy-dialog")[0];
modal.style.width="100%";
modal.style.height="100%";
modal.style.left="0px";
modal.style.top="0px";
let content = document.getElementsByClassName("modal-dialog-content")[0];
content.style.height="100%";
let iframe;
let iframes = document.getElementsByTagName("iframe");
for(let x=0;x<iframes.length;x++)
{
let elem = iframes[x];
if(elem.src.startsWith("https://docs.google.com/drawings"))
{
iframe = elem;
}
}
iframe.style.width="100%";
iframe.style.height="100%";
I use this simple “hack” from console. Just open the drawing modal > press F12 > Click Console > and paste this following js.
modal = document.getElementsByClassName('modal-dialog');
frame = modal[0].getElementsByTagName('iframe');
modal[0].style.width = window.innerWidth+"px";
modal[0].style.height = window.innerHeight+"px";
modal[0].style.top = 0;
modal[0].style.left = 0;
frame[0].width = window.innerWidth;
frame[0].height = window.innerHeight;
I think my Cesium globe is too dark. Here is two images: one from Cesium and other from OpenLayers, both from same location and same geoserver layer.
Already set viewer.scene.globe.enableLighting = true; as you can see in image below:
My setup:
viewer = new Cesium.Viewer('cesiumContainer',{
timeline: false,
animation: false,
baseLayerPicker: false,
geocoder : false,
infoBox : false,
selectionIndicator : true,
navigationHelpButton : false,
});
viewer.scene.globe.enableLighting = true;
var scene = viewer.scene;
var imageryLayers = scene.imageryLayers;
baseLayer = imageryLayers.get(0);
imageryLayers.remove( baseLayer );
var baseProvider = new Cesium.WebMapServiceImageryProvider({
url : myUrl,
layers : 'osm:OSMMapa',
parameters : {
transparent : true,
format : 'image/png',
tiled : true,
}
});
imageryLayers.addImageryProvider( baseProvider );
how can I set my view to be brighter like OpenLayers and show the image as it realy is?
A couple of things you can try here:
First, enableLighting can be false, if you don't care about time or don't want the "night side" of the globe to be dark. It's counter-intuitive that turning off lighting would make things brighter, but really this flag is about turning off the lighting calculations, replacing them with full brightness always.
But the more effective thing, at least in the short term, may be to turn off HDR:
viewer.scene.highDynamicRange = false;
"High Dynamic Range" applies to fancy 3D models and their reflections, and in current versions of Cesium it also involves a color processing technique called tone-mapping. But if you're not using any of that, then this is all irrelevant to you, and is actually hurting the contrast of the images.
The behavior of this may change in a future release to be a little smarter about when and how tone-mapping is applied. But for now, the workaround is to turn off HDR.
I'm using this script:
var canvas = new fabric.Canvas('game_canvas', { selection: false });
fabric.Image.fromURL('images/bg.jpg', function(img) {
img.set('left', 1024/2).set('top', 600/2).set('zindex', 0);
canvas.add(img);
});
fabric.Image.fromURL('images/panel-2-bg-l-r.png', function(img) {
img.set('left', 262/2).set('top', (390/2)+110).set('zindex', 1);
canvas.add(img);
});
fabric.Image.fromURL('images/player-board.png', function(img) {
img.set('left', 254/2).set('top', (122/2)).set('zindex', 2);
canvas.add(img);
});
fabric.Image.fromURL('images/player-board-top-red.png', function(img) {
img.set('left', 203/2).set('top', (109/2)).set('zindex', 3);
canvas.add(img).bringToFront(img);
});
3rd image draw is working properly and showing one on top of the other. But if I add 4th one it's hiding behind 3rd. If I specify zindex of the image it's still under 3rd only.
What is wrong with this? Am I doing something wrong here? Please help.
Thanks
Peter
There are couple of issues here.
1) You can't change zindex of images by setting their zindex property. Fabric images simply don't have such property and changing it doesn't change z index of images on canvas. This makes all those .set('zindex', 0), .set('zindex', 1), etc. pretty much a no-op.
2) bringToFront works as expected here, bringing last image all the way to the top of the drawing stack. But the problem is that "images/player-board-top-red.png" image which you're loading last is not guaranteed to be the last one added. Those 4 requests are asynchronous; they are coming in any order, and so callbacks are executed in any order as well. In my test, for example, the last image comes second, callback executes, image is brought to the front, but is then "overwritten" by following 2 callbacks.
How to make last image render on top? Well, we can simply check that all images are loaded before attempting to bring last one to the top:
var img4;
// ...
function checkAllLoaded() {
if (canvas.getObjects().length === 4) {
canvas.bringToFront(img4);
}
}
// ...
fabric.Image.fromURL('images/1.png', function(img) {
img.set('left', 0).set('top', 0);
canvas.add(img);
checkAllLoaded(img);
});
// load other images, making sure to include `checkAllLoaded` in callback
fabric.Image.fromURL('images/4.png', function(img) {
img4 = img.set('left', 0).set('top', 0);
canvas.add(img);
checkAllLoaded(img);
});
By the way, don't forget that you can pass an object to set method like so:
img.set({ left: ..., top: ... });
And since set is chainable and returns reference to an instance, you can even pass it to add like so:
canvas.add(img.set({ left: ..., top: ... }));
Hope this helps.
You can use canvas.insertAt(object,index); instead of canvas.add(object) to set object's zIndex as per your choice.
Also you can get any object by using:
canvas_object = canvas.item(index);
If you want to bring that object in front, use:
canvas_object.bringForward()
//or
canvas_object.bringToFront()
Is there a way of preventing a Google Maps (JS, v3) map being displayed from the get-go? I'm doing some pre-processing and would like to show my 'Loading' spinner until everything is good to go (more eloquently put, hide the map -- e.g. the container div – until all pre-processing is complete – at which point, show the map).
Hooking up the map's idle event doesn't help that much, since the map is already displayed when this event hits.
I know that the container div gets inline-styled by GMaps after loading, my first idea was to clear out the style attribute (whilst listening to the idle event), but it would be interesting to see if there is a way of creating the map and not displaying it until all pre-processing is done.
Maybe by using an argument to the new google.maps.Map constructor, or a MapOption ?
Any thoughts on this?
Thank you in advance!
Also remember to call:
google.maps.event.trigger(map, 'resize');
if you have changed the size of the <div>. A display:none <div> has no size.
Or you could just hide it like with css visablility or css opacity.
$("#GoogleMap").css({ opacity: 0, zoom: 0 });
initialize();
google.maps.event.addListener(map,"idle", function(){
$('#Loader').hide();
$("#GoogleMap").css({ opacity: 1, zoom: 1 });
});
This works for me. I'm using the JQuery library.
$(document).ready(function(){
$('#Checkbox').click(function(){
$('#googleMapDiv').toggle();
initialize(); // initialize the map
});
});
another way to show the hidden map when map is first time rendering the <div> is to set style: visibility.
When firstly hidden, use visibility = hidden; to show use visibility = visible
the reason is: visibility:hidden means that the contents of the element will be invisible, but the element stays in its original position and size.
this works fine for me, I use jquery tabs
setTimeout(function() {
google.maps.event.trigger(map, "resize");
map.setCenter(new google.maps.LatLng(default_lat, default_lng));
map.setZoom(default_map_zoom);
}, 2000);
om this link https://code.google.com/p/gmaps-api-issues/issues/detail?id=1448
This will work
google.maps.event.addListener(map, "idle", function ()
{
google.maps.event.trigger(map, 'resize');
});
better way:
gmap.redraw = function() {
gmOnLoad = true;
if(gmOnLoad) {
google.maps.event.trigger(gmap, "resize");
gmap.setCenter(gmlatlng);
gmOnLoad = false;
}
}
and in show click event:
$("#goo").click(function() {
if ($("#map_canvas").css("display") == "none") {
$("#YMapsID").toggle();
$("#map_canvas").toggle();
if (gmap != undefined) {
gmap.redraw();
}
}
});
depending on what you are doing another posibility could be to have multiple bools you set to true when each process is done.
For example:
if you have a geocode service running which you want to wait for, you could have a var called
GeoState
and in the result part of the geocoder set GeoState to true,
then have a timed function check if all the services have returned true, when they have, make the map visible.