I have an issue when I zoom In/Out the parent component of a FabricJS Canvas in DrawingMode
I have the following component:
<div id="board">
<canvas id="whiteboard"></canvas>
<div class="pawn"></div>
</div>
Default behavior is OK, when I zoom the #board with css zoom property everything scale properly
BUT the hand drawing no longer works because the x,y mouse coordinated might use client X/Y without the zoom level of the parent. Even if I create a new fabric.Canvas after zoom.
Is there a work around ?
Related
I know how to change the background colors in the CSS, but there is still the slightest border in the electron window (frameless), and I want to change that to the same color as in my webpage.
The window is generated in the
app.on('ready', function() {});
And I don't know how to call that again, and change the attribute for the backgroundColor.
Any help is appreciated.
You could use BrowserWindow's backgroundColor property.
But since you want to change the background color after the window's loaded, what you can do is, change the body element's background-color attribute in your Javascript event handler.
Code snippet (without Electron but should work the same):
function clickHandler() {
$('body').css('background-color', 'red');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" onclick="clickHandler()" value="Click me!" />
I am trying to use a SVG with an embedded bitmap as a navigation element. The idea is to make it more mobile friendly. I already have a PNG fallback in place for IE8 and below.
Somehow the embedded bitmap doesn't show in webkit based browsers. SVG without bitmap embedded show just fine.
I can get the background to show in webkit using the "object" tag but then my links don't work, I can't control the width and I run into a documented bug of safari where image is not scaled and sliders appear.
See the page in question here:
http://www.izbornareforma.rs/izbori-2012/
All images are SVG, the four bottom one have embedded bitmap in them.
There are a number of similar question but none have a workable solution.
Suggestions welcome.
G.D.
This is a bug in Webkit. If you keep your current backgrounds and also load the same SVGs in an object tag you will see that the SVG backgrounds will load correctly with the embedded data. To work around this I would suggest you to create an invisible div where you load your SVGs in object tags, such as...
<div id="svgfix">
<object ... />
<object ... />
<object ... />
<object ... />
</div>
Your CSS:
#svgfix {
width: 0;
height: 0;
position: absolute;
visibility: hidden;
}
The corresponding Webkit bug was fixed and rolled-out with Safari 9.
I have a flash stuff on a web page, which height I want to control basing on parent's explicitly set height. Width should be recalculated to preserve proportions - as it happens when dealing with <img> tag:
<div>
<object>
<embed src="..."> <!-- no attributes except src -->
</object>
</div>
<style>
div { height: 300px; }
object, embed { height: 100%; }
</style>
Instead of expected behaviour I get the flash of absolutely other size: it is much smaller than it's parent in all dimensions. Actually, I don't understand why it takes this particular size - it looks too small (like zoomed out few times).
To make it to behave in a proper way I have to set both width and height for explicitly. It may be done both inline and in CSS.
The question is: why doesn't it calculate height (though it obviously has enough data - <img> can resize properly at the same conditions) based on parent's height and given percentage?.
(Initially I've had many other attributes (including duplicated width and height on both and tags) which all I removed to simplify the example. While doing that, I was checking whether removement changes anything and it didn't except of width and height attributes.)
Press F5 in this example: DojoToolkit.
First the content is shown, and after that the layout gets into it's final state. In my application I want the opposite, so that the layout gets rendered, and after that the content is displayed. I don't want that 'jumping' phenomenon when loading. Is it possible to fix this somehow?
No, I don't think that there is such an option. Anyway, you could use a container div (with all the dojo layout elements in it) with initial state visbility:hidden, and after the page is loaded and parsed change it's visibility to "visible".
<div id="container" style="visibility:hidden">
<!-- dijit widgets inside the "container"-->
</div>
<script type="text/javascript">
dojo.ready(function(){
dojo.style("container:, "visibility", "visible");
});
</script>
I am trying to stretch an svg document inside an DOM in order to fit the window size.
like so:
<div id="y">
<div id="button"> click to zoom</div>
<embed id="x" src="s17.svg" >
<script>
var btn= document.getElementById("button");
btn.addEventListener('click',function(){
var z= document.getElementsByTagName("embed")[0];
var y = z.getSVGDocument();
y.lastChild.setAttribute("viewBox","0 0 "+window.innerWidth+" "+window.innerHeight);
},false);
</script>
</div>
css:
#x{
height:100%;
width:100%;
overflow:hidden;
}
#y{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
overflow:hidden;
}
This isn't working... What am I doing wrong?
All browsers should be able to handle this just fine:
add a viewBox to the svg element (s17.svg in your example) without using script if possible
remove the width and height attributes on the svg element if they are specified
add an attribute preserveAspectRatio="none" to the svg element to make it stretch even if the css-viewport aspect ratio doesn't match the viewBox aspect ratio.
set the width/height of the embed/iframe/object to whatever you want and the svg will automatically stretch to fit
If you don't want stretching then you can also do preserveAspectRatio="xMidYMid slice" (fill whole viewport, slicing away parts if necessary) or preserveAspectRatio="xMidYMid meet" (this is the default, center the svg in the viewport and maintain the aspect ratio).
All browsers handle SVG support completely differently. I think your best bet is to use an object tag instead of embed, and you still have to do some hacking to get it to look right on each browser. This link and this link have some useful information for getting it to work cross-browser.