No idea what I'm doing wrong here, but apparently I've upset IE10 somehow. I've got a bit of FabricJS that looks simple enough. It works in everything except IE10 and below. Not sure why?
var canvas = new fabric.Canvas('imageCanvas', {
backgroundColor: 'rgb(240,240,240)'
});
var imgElement = document.getElementById('imageSource');
var fabricImg = new fabric.Image(
imgElement, {
selectable: false,
evented: false,
hasControls: false,
hasBorders: false
}
);
canvas.add(fabricImg);
Screenshot showing IE10 (left) and IE11 (right):
Demo (open in < IE11 to see the problem): https://jsfiddle.net/8fy3rv04/
I've tweaked every option I can think of and looked through the FabricJS documentation for fabric.Image, but I can't see where I might have done something to anger IE. Pulling my hair out now!
The answer was a simple bit of CSS that marked imageSource as display:none. It was useful to load the image in a hidden <img> element and then put it on the canvas, but instead I've had to load the image through fabric.Image.fromURL.
A very weird issue for IE10 that meant as the <img> was hidden, so was the image when it was put on the canvas! Bizarre.
Related
I'm using the plugin Leaflet browser print and have a problem, when I click to print, I I would like to show the scale in the print, but I can not do it at all. Even though you configured exactly as shown in the example (https://github.com/Igor-Vladyka/leaflet.browser.print), it does not appear.
My code is basic:
// PRINT
ctlPrint = L.browserPrint({
closePopupsOnPrint: false,
printModesNames: {Portrait:"Retrato", Landscape:"Paisagem", Auto:"Auto", Custom:"Selecione a área"}
}).addTo(map);
map.on("browser-print-start", function(e){
L.control.scale({
position: 'topleft',
imperial: false,
maxWidth: 200
}).addTo(e.printMap);
});
Just it! According to the code, the scale was to be shown at the top and left, and in the preview before printing it actually shows the scale, but when it is to print no. Somebody help me? Thanks! My code is here: https://github.com/eltonsantos/mapasFortaleza/blob/master/js/script.js
Try with "browser-pre-print" event.
When "browser-print-start" event is fired, overlay is yet created.
Look at _print function in
https://github.com/Igor-Vladyka/leaflet.browser.print/blob/master/src/leaflet.browser.print.js
I'm testing KineticJS right now. I tried adding an image to the canvas following this tutorial. I changed a bit the code but it's relatively the same.
What's confusing is that locally it's not working at all...no images are displayed and no errors at all. Online is a different story, images are loaded BUT sometimes it looks like the images are not loading.
This is what I have: http://codepen.io/semajtwin/pen/nIafc
I thought maybe it was the browser as well, I tried on three different browsers (Chrome, Firefox and Internet explorer) but still ended up with the same result.
I just can't figure out what's wrong really.
Thanks in advance for any help.
#RobinvdA is correct that you need to give the images time to load.
Your draw draw_img(); and draw_img2(); are being called before the images are fully loaded.
The fix is to put the draw_img code inside onload, like this:
Here's some refactored code and a Demo: http://jsfiddle.net/m1erickson/fLPZt/
// declare sun_img outside `onload` so it's accessible later
var sun_img;
// create a Kinetic.Image of the sun
var sunReady = false;
var sunImage = new Image();
sunImage.onload = function () {
sun_img = new Kinetic.Image({
x: 0,
y: 0,
width: 200,
height: 200,
image: sunImage,
draggable: true
});
layer.add(sun_img);
layer.draw();
};
sunImage.src = "http://2.bp.blogspot.com/-GDMbp9j3iSo/Tgh24-ighVI/AAAAAAAAAgE/a4glfYd5-68/s200/radiantsunheliumballoon.jpg";
I'm using two plugins which independently work correctly. Galleriffic and Loupe are the two plugins. What I'm trying to do is have the large image in Galleriffic also have a magnify on hover effect, which is what Loupe is for. I've had to add one line of code newSlide.find('a img').addClass('magnifyPic'); to the Galleriffic plugin in order to get a class on the image, which should be used by Loupe to activate the magnify effect. Below are the two calls for the plugins.
jQuery(document).ready(function($) {
var gallery = $('#thumbs').galleriffic({
'imageContainerSel': '#bigPics',
'enableBottomPager': false,
'renderNavControls': false,
'renderSSControls': false,
'enableHistory': false,
});
$('.magnifyPic').loupe({
'default_zoom': 300,
'shape' : 'rounded',
'default_size' : 160,
'glossy' : false,
'drop_shadow' : false
});
});
The problem is that absolutely nothing happens when I hover over the large image. Independently the two plugins function correctly, but don't seem to want to work together. If I understand it correctly, the Galleriffic plugin can take callback, functions, etc. in its options, so I guess my question is: How do I integrate the Loupe call into the Gallerific call? Or is that the correct way to go about making Loupe work with only the large image in a Galleriffic gallery? I've tried removing, adding, modifying lines of code to both plugins, but can't seem to get them to work together.
Search for image.src in jquery.galleriffic.js. It should appear twice (around line # 338 and # 611). Add the following line after image.src = ...:
image.src = ...
$(image).loupe();
Note: I also added this to my CSS. Before this adding this CSS rule, the loupe was causing very minor enlargement (maybe I am using the plugin wrong?):
.loupe img {
width:800px;
height:800px;
}
I posted the example on github. You can try it out here http://ted-piotrowski.github.com/example-gallerific/
it's my first post here, so be gentle with me ;)
I'm trying to make a simple editor using MooTools (still 1.2.5 though..). Every element has a drag corner to make it resizable.
The whole thing works really great, until the element is rotated. After giving it -moz-transform: rotate(Xdeg) property the drags are going crazy (simple example: http://jsfiddle.net/HTg57/1/)
I know why this happens - although element is rotated all events come as the element would be in normal position.
The question is - are there somewhere any libs which can handle this problem?
I think that I know how to solve the problem by myself, but it will take time, which I don't have.
So - are there any ready solutions to make dragging work properly when element is rotated?
not sure what you mean by 'work properly' but you really should look at this, which makes more sense (behaviour wise): http://jsfiddle.net/dimitar/HTg57/2/
var Box = new Class({
mEl: null,
mDragEl: null,
mDrag: null,
initialize: function(pEl) {
this.mEl = pEl;
this.createDrag();
},
createDrag: function() {
this.mDragEl = new Element('div', {
'class': 'drag'
}).inject(this.mEl);
this.mEl.makeResizable({
handle: this.mDragEl,
limit: {
x: [60,300],
y: [60,300]
}
});
}
});
new Box(document.getElement('div.box'));
new Box(document.getElement('div.rotate'));
it takes advantage of the element.makeResizable with a handle and a size limiter. it works fine when element is rotated as well. have fun...
When using javascript to swap images the HTML is updated fine but what Opera actually displays is not unless you scroll or resize the window. A picture of what happens when you scroll explains it best.
alt text http://img340.imageshack.us/img340/9455/87855188.png
Any ideas?
EDIT: The source of the problem seems to be that the image is inside a div that has float right.
EDIT2: This http://trac.dojotoolkit.org/ticket/3158 would suggest that it's a bug that was fixed and is back again.
Odd, I've never experienced problems like that before. I think that is a combination between browser and the graphics card / GUI, I've had exactly this behaviour before but in all sorts of applications (OpenOffice), not only the browser.
Ideas on how to maybe trick it into updating:
Set opacity to .99 and then back to 1
Change position by 1px (jerky though)
Set display to none and to block again (flickers, not nice, but to see whether it works)
Move it off the screen for a (milli)second and back again (probably flickers)
I have faced the same problem. This seems to be a bug related with Presto based Opera versions (< 12.5). The src attribute of the img elements seems to be updating correctly but the changes are not reflected to DOM. Triggering reflows are sadly not working. Only detaching and reattaching the node seems to fix the problem. I have tried following that led to no avail:
Change src to null, and then to new value,
Change src to null, change position (top/left etc), change width/height,
Trigger above with delay (i.e. 100ms delay between null and new value)
Performing various combination of above with any order.
The only way that correctly fixed the problem was detaching related node from DOM and reinserting. Here is the piece of code if anyone needs:
var isOperaPresto = this.navigator.userAgent.includes("Opera") && this.navigator.userAgent.includes("Presto");
if(isOperaPresto)
{
/* if browser is opera presto, updating image elements' sources will not upload the DOM visual.
So we need to do some hacking. Only thing that works is to remove and reAppend the relevant node... */
Object.defineProperty(HTMLImageElement.prototype, "src", {
enumerable: true,
configurable: true,
get: function() {
return this.getAttribute("src");
},
set: function(newSrc)
{
/*max-size confinement is required for presto if parent is display flex. Image will go out of its available size otherwise*/
this.style.maxHeight = this.style.height;
this.style.maxWidth = this.style.width;
this.setAttribute("src", newSrc);
/*we have to put this node back to exactly where we rip it from*/
var parent = this.parentNode;
if(this.nextElementSibling != null)
{
var reference = this.nextElementSibling;
parent.removeChild(this);
reference.insertAdjacentElement("beforebegin", this);
}
else
{
parent.removeChild(this);
parent.appendChild(this);
}
}
});
}