I'm trying to change to opacity of a mapLabel, but turns out there is no opacity attribute in the reference:
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/maplabel/docs/reference.html
Solution: in maplabel.js add:
function MapLabel(opt_options)
{
...
this.set('opacity',1);
...
}
and add another:
<MapLabel.prototype.changed = function(prop)
{
switch (prop) {
...
case 'opacity':
return this.drawCanvas_();
...
}
}
and 1 more:
MapLabel.prototype.drawCanvas_ = function()
{
...
ctx.fillStyle = this.get('fontColor');
ctx.globalAlpha = this.get('opacity');
ctx.font = this.get('fontSize') + 'px ' + this.get('fontFamily');
...
}
this won't solve if you want to search strokeOpacity though...
Oh, and I'm sorry if I didn't do an actual question or anything correctly, first time submitting in stackoverflow to post a solution.
Placing a MapLabel on top of a Polygon in Google Maps V3
How to change the opacity (alpha, transparency) of an element in a canvas element after it has been drawn?
Related
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 would like to implement a swipe gesture to replace the current Next/Prev-buttons in my web app. I figure I'll use either jQuery Mobile, QuoJS or Hammer.js to recognize the swipe gestures.
But how can I go about implementing the swipe animation (similar to this) to go with the gestures?
I'm not flipping between images as in the example, but html sections mapping onto Backbone Model Views.
This finally "solved" it. I'm using jQuery-UI with a slide effect, but it's not looking as good as I had hoped, I want it to look more like on iOS using Obj-C. But it will have to do.
var handleSwipeEvents = function() {
$(function() {
$('#myId').on('swipeleft', swipeHandler);
$('#myId').on('swiperight', swipeHandler);
function swipeHandler(event) {
function slideEffect(swipeLeft, duration) {
var slideOutOptions = {"direction" : swipeLeft ? "left": "right", "mode" : "hide"};
$('#myId').effect("slide", slideOutOptions, duration, function() { // slide out old data
var slideInOptions = {"direction" : swipeLeft ? "right" : "left", "mode" : "show"};
$('#myId').effect("slide", slideInOptions, duration); // slide in new data
// Alter contents of element
});
}
var swipeLeft = (event.type === "swipeleft");
slideEffect(swipeLeft, 300);
}
});
};
I have a feeling one can achieve better results using CSS3 and transition, but I haven't succeeded with that.
I think this is a bug in the latest Chrome (21.0.1180.57), but I thought I'd post here just to double check.
I'm changing the rotation of an element using javascript, and using webkit transitions to animate the rotation. Sometimes, depending on the start and end rotation, the element randomly scales along with the rotation. I've made a demo here: http://jsfiddle.net/XCwUQ/ (click the body).
Does anyone know why this might be happening?
Cheers,
Christian
UPDATE: Seems to be fixed now in Chrome 23. (See #joequincy comment on the original question)
Indeed, this seems like a bug. Until it is fixed, you can work around with the jQuery animate() function like this:
$(function() {
var rotation = 163;
$('body').on('click', function() {
rotation = (rotation == 163) ? 198 : 163;
$('#wheel').animate({
borderSpacing: rotation
}, {
step: function(now, fx) {
$(this).css('-webkit-transform', 'rotate(' + now + 'deg)');
$(this).css('-moz-transform', 'rotate(' + now + 'deg)');
$(this).css('-ms-transform', 'rotate(' + now + 'deg)');
$(this).css('-o-transform', 'rotate(' + now + 'deg)');
$(this).css('transform', 'rotate(' + now + 'deg)');
}
});
});
});
Remove the transition CSS statements and add:
border-spacing: 163px;
This example misuses the border-spacing attribute, since it won't affect your layout in most cases.
See http://jsfiddle.net/hongaar/wLTLK/1/
(Thanks to this answer: Animate element transform rotate)
NOTE: You can optionally use the jQuery transform plugin to remove the ugly multiple css() calls and for a simpler version of the animate() syntax (but adding overhead). See https://github.com/louisremi/jquery.transform.js
Okay, so I graphed a scatter plot in highcharts. I want to make it so when I hover over a series, all of the other series dim. I've tried changing the fillOpacity and the color properties of the markers and it doesn't seem to work. This is what I currently have:
series:{
events:{
mouseOver: function(event){
console.log("in");
var series_to_keep = this;
$.each(chart.series, function(seriesNo, serie){
serie.hide();
});
this.show();
this.select(true);
},
mouseOut: function(event){
console.log("out");
console.log(this);
$.each(chart.series, function(seriesNo, serie){
if(!serie.visible){
serie.show();
}
});
},}}
...
This currently hides the other series, but I don't want to HIDE them. How do I just change the opacity of the markers of the other series on hover, then switch them back? I can't find which properties need to be changed. I've missed with so many and none seem to work.
From this discussion, you can use something like this to adjust the color dynamically:
serie.color = "#FF00FF";
serie.graph.attr({
stroke: '#FF00FF'
});
$.each(serie.data, function(i, point) {
point.graphic.attr({
fill: '#FF00FF'
});
});
serie.redraw();
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()