I'm stumped on how to achieve this with FabricJS. I have the fabric container:
<div class="canvasContainer canvasDemo">
<canvas id="canvas" width="1935" height="1380"></canvas>
</div>
with the corresponding CSS:
.canvasContainer {
border: 1px solid #ccc;
box-shadow: 1px 1px 5px rgba(0,0,0, 0.25);
border-radius: 5px;
margin-top: 5px;
overflow: hidden;
width: 935px;
height: 380px;
}
#canvas {
overflow: visible
}
This effectively creates a much larger canvas inside a container. I was hoping there was something built-in to Fabric that would allow me to "move" the entire canvas to different parts of the overall canvas. Basically, the goal is to have a smaller visible area on a much larger overall canvas.
My goal is to have the move icon on the visible canvas when it is in selection mode so the user can move the entire canvas to other sections of the overall drawing.
Any ideas on how to achieve this with FabricJS?
I have the same problem. I need a hand to move to others zones of canvas and in my case, the scroll don't is an option...
Have you tried x Zoom In Zoom Out? Probably is a solution for you, please look: http://jsfiddle.net/Q3TMA/98/
<canvas id="c" width="1935" height="1380"></canvas>
Related
QUESTION:
Using the Gamepad API, i am having a problem when re-sizing the window; namely, a finite padding-bottom appears between the bottom of the #gameBoard and the bottom edge of the Browser window -- which I do not want:
Please note that I have tried a Sticky Footer which depends on position: absolute; which I would prefer to avoid.
EG,
with a padding-bottom > 0
I am looking for this with each window re-size:
padding-bottom = 0
HTML:
<div id="gameEnclosure">
<div id="header">
stuff here
</div>
<div id="gameBoard">
<canvas id="game">
game piece img's here
</canvas>
</div>
</div> <!-- gameEnclosure -->
CSS
/* COMMON RESET */
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
body {
background-color: blue;
}
#gameBoard {
display: block;
position: relative;
width: 100%;
height: auto;
background-color: #fff;
background-image: url("../images/room.gif");
background-size: cover;
}
As already stated, I have tried using a Sticky Footer and I just do not like using position: absolute. Also, the individual game piece images do not maintain their proper aspect ratio with window re-sizing = another no-no.
JS
function doBodyOnResize() {
let gameHeight = $('#gameBoard').outerHeight();
$('body').css('padding-bottom', gameHeight);
$('#gameBoard').css('height', gameHeight);
}
This is the onresize function I used to have with the Sticky Footer.
Without a Sticky Footer, game pieces zoom in and zoom out just great -- if I could just get keep padding-bottom = 0 upon window resizing.
I need some help to fix my rounded border. It looks so ugly. I want it more smooth, but I can't seem to fix it no matter what. I don't know what I am doing wrong.
Here is a picture of it:
Here is my HTML:
<div class="sidebar">
<!-- User avatar/message/notification/settings buttons -->
<div class="userpanel">
<div class="userpanel-image">
<img src="image.jpg">
</div>
<div class="userpanel-buttons">
<ul>
<li><span class="glyphicon glyphicon-envelope"></span></li>
<li><span class="glyphicon glyphicon-bell"></span></li>
<li><span class="glyphicon glyphicon-cog"></span></li>
</ul>
</div>
</div>
</div>
And here is my CSS:
.sidebar > .userpanel > .userpanel-image img {
border: 1px solid white;
border-radius: 25px;
margin: 3px;
margin-right: 25px;
}
This ultimately depends upon the pixel density of the monitor you are using.
Pixels per inch (PPI) or pixels per centimeter (PPCM) is a measurement of the pixel density (resolution) of an electronic image device, such as a computer monitor or television display, or image digitizing device such as a camera or image scanner. Horizontal and vertical density are usually the same, as most devices have square pixels, but differ on devices that have non-square pixels.
For example, a 15 inch (38 cm) display whose dimensions work out to 12 inches (30.48 cm) wide by 9 inches (22.86 cm) high, capable of a maximum 1024×768 (or XGA) pixel resolution, can display around 85 PPI in both the horizontal and vertical directions. This figure is determined by dividing the width (or height) of the display area in pixels by the width (or height) of the display area in inches. It is possible for a display to have different horizontal and vertical PPI measurements (e.g., a typical 4:3 ratio CRT monitor showing a 1280×1024 mode computer display at maximum size, which is a 5:4 ratio, not quite the same as 4:3). The apparent PPI of a monitor depends upon the screen resolution (that is, the number of pixels) and the size of the screen in use; a monitor in 800×600 mode has a lower PPI than does the same monitor in a 1024×768 or 1280×960 mode.
Monitors with a higher pixel density will tend to smooth curves much better visually.
There's really nothing you can generally do to improve the pixel density display via HTML/CSS or really, anything. You merely have to learn to live with the quality of your monitor or upgrade it.
In some cases, applying a slight 1px box-shadow the same color as your circle can assist in the monitor anti-aliasing. However, that's not 100% successful either.
You're definetly not doing anything wrong.
Maybe that just because the border is too thin. Try to change border: 1px solid white; to 2px, 3px, or whatever you like. Give it try.
For me this looks best:
.userpanel-image {
width: 100px;
height: 100px;
border-radius: 100%;
box-shadow: 0 0 1px 1px white;
overflow: hidden;
}
.userpanel-image img {
width: 98px;
height: 98px;
}
Unfortunately i had the same problem several times. I think this might be a render problem which cant be solved 100%. Maybe you can use the workaround i used for my "border-problem" to make it look sharper (I did not test it on every single browser so u might have to check that out)
body {background:black;}
div {
width:100px;
height:100px;
display:block;
background:#fff;
border-radius:100%;
padding:2px;
}
img {
display:block;
border-radius:100%;
display:block;
width:100px;
height:100px;
}
<div>
<img src="https://unsplash.it/100" alt="">
</div>
Usually when I'm faced with this problem, I just reduce the contrast of the colors to help ease the pixelated anti-aliasing (as I mentioned in my comment). This is not always an option however. The real problem you are facing is that the browser will apply a certain amount of anti-aliasing to prevent complete jaggedness and you don't really have control over the intensity of that anti-aliasing that's applied. Here's an alternative that you can use to help take control of the appearance. You can use box-shadow to supplement or replace your existing border:
body {
background: #223;
padding-bottom: 25px;
text-align: center;
color: white;
}
div {
margin-top: 25px;
}
img {
display:inline-block;
border-radius: 50%;
border: 1px solid white;
vertical-align: middle;
}
div + div img {
box-shadow: 0 0 1px 0 white;
}
div + div + div img {
box-shadow: 0 0 0 1px white;
border: none;
}
<div>border only: <img src="//placehold.it/50/933/FFF"></div>
<div>border + box-shadow: <img src="//placehold.it/50/933/FFF">
<div>box-shadow only: <img src="//placehold.it/50/933/FFF">
sorry if this has been asked a zillion times. i am unable to find a satisfactory answer.
whats the simple and efficient way to display any and all images in 16:10 ratio on page, where the width of image is set to x% (responsive design).
so basically how to work on height. instead of height: auto, use height: width*10/16 or something. or any other solution that makes this possible with little code and effort.
using either CSS or JS or even PHP.
for example, this div with img's:
<div>
<img src="http://imageshack.com/a/img540/2396/OrosLf.jpg" />
<img src="http://imageshack.com/a/img908/5868/G92vQu.jpg" />
</div>
wit hthis CSS:
div { height: 100%; width: 100%; }
img {
display: block; float: left;
background: #ccc; border: 1px solid #555;
width: 45%;
height: auto;
}
heres the fiddle: JSFIDDLE
PS: i did check object-fit but i guess its not well supported? - caniuse objectfit
I've some problem with border-radius function in firefox.
When i apply, it makes some kind of space, or border around the item.
Can somebody tell me that this is a firefox bug or is there some resolve for that?
Here is the problem:
JsFiddle
The
border-radius:50%;
line makes that, i am sure.
Seems to me that this is a FF issue at rendering shadows with border-radius.
You could try this simple trick :
The demo
Basically, you apply the grey shadow on the parent li, make it a bit finer and then move a bit the a.ch-item child in order to make it go over the gap.
.ch-grid > li {
box-shadow: 0px 0px 5px 15px rgba(255, 255, 255, 0.6);
border-radius: 50%;
width: 198px;
height: 198px;
}
.ch-item {
position: relative;
top: -1px;
left: -1px;
}
Of course, this is just for the idea. You might also want to apply the hover effect on the li element itself and move it 1px down and right to have a better result.
Edit : a better result
I'm doing some stylistic text inside of rounded divs, where the text bumps right up against the top of the container. I've been able to control almost all content, nested divs, images set as backgrounds, etc, and had them all clip successfully, but this one has been giving me serious grief.
Using the old-school image borders or cover-ups is not a solution as we have dynamic graphical backgrounds. We need a solution to actually clip the text.
This is mostly visible in Firefox 3.x and older versions of Chrome
Here's the sample code to play with:
http://jsfiddle.net/vfp3v/1/
div {
-moz-border-radius: 45px;
border-radius: 45px;
background-color: #ccc;
font-size: 100px;
color: #777;
line-height: 70%;
overflow: hidden;
width: 257px;
}
the jank:
Notice it's been fixed in the new Chrome and FireFox 4 - the shui:
Most of our site users are Firefox 3.6, so would love to be able to provide an elegant solution for them as well. Any help appreciated! Cheers
This one works in FF 3.6: http://jsfiddle.net/vfp3v/15/
It has some drawbacks, as you can see in the second example (in FF 3.6) the clipped off border has a solid color, so if you are using some kind of background this might look ugly. Just take a look at it, it might fit your needs.
I just added a span:
<div><span></span>WXYZ</div>
and then positioned it over the text with a border in the same color as the background, and a displacement as big as the border:
div{
position:relative;
etc...
}
span{
position:absolute; display:block; width:100%; height:100%;
border:25px solid #fff; top:-25px; left:-25px;
-moz-border-radius: 70px; border-radius: 70px; /* 45 radius + 25 border */
}
edit: just tested this in chrome 10.0.6 (which has the clipping bug) and it worked!
In browsers that correctly support the border-radius the span (and it's border-color) isn't even visible because it is clipped off (overflow:hidden).