zwwcn

Just another WordPress.com site

Category Archives: CSS

Javascript drawing on an image inside a canvas

I just finished a task: load an image inside a popup canvas then draw lines on the canvas and save the image data. I had a couple issues during the development, but luckily I managed to find answers on google.

  1. How to draw on canvas on mobile devices.
    I found a good article which give all the details Using Touch Events with the HTML5 Canvas.  You should be aware of the difference code for IOS,Android and canvas in browser. The touch devices use “touchmove”,”touchstart” while the browswer uses “mousemove”,”mousedown”..etc
  2. We need to stop page scrolling when user are ready for drawing.
    stopScroll = (ev) ->
      ev.preventDefault();
    
    $page.on("popupbeforeposition","#popupPanel", (event,ui) ->
     $('body').bind('touchmove',stopScroll);
    )
    $page.on("popupafterclose","#popupPanel",(event,ui) ->
       $('body').unbind('touchmove',stopScroll);
    )
    
  3. How to improve image quality.
    When loading the photo to canvas, you may get a blurry image. The following code improve the quality of image

    canvastx = popupCanvas.getContext("2d");
    canvastx.webkitImageSmoothingEnabled = false;
    canvastx.mozImageSmoothingEnabled = false;
    canvastx.imageSmoothingEnabled = false;
    
  4. Don’t resize canvas, you should always create new one.
    Make sure you create new canvas after reading the image info. This way you know the image demision, then you could create new canvas with the same width/height ratio.  If you draw on a resized canvas,  everything(x,y point) on that canvas will be scaled.  You will have to do some calculation to get the orginal point. That’s why I prefer creating a new canvas with the right size.
Advertisements

Position An awesomefont background Relative to its Container Using CSS

<div id="container">
   <div id="box"> </div>
</div>
#container {
  position: relative;
}

#box:after {
  content: "\f154"; 
  font-family: FontAwesome;
  font-size: 100px;
  position: absolute;
  top: 40px;
  left:20px;
  z-index: 1;
}

ref : http://stackoverflow.com/questions/104953/position-an-html-element-relative-to-its-container-using-css

Placing text after css background image

css code:

</code>

.category-list li:nth-child(1) a{
background-image: url('/image.jpg');
background-repeat: no-repeat;
background-position: center;
padding: 160px 0px 0px 0px;
margin: 0px 0px 0px 0px;
display:block;
width:220px;
height:203px;
color:#58595b;
}

<code>

Clickable image and text link shows below:

sample

js script to check ajax page change

We could add break point in firebug to check ajax page changes

<script type=”text/javascript” language=”javascript”>
document.documentElement.addEventListener(‘mouseup’, function(e){
mouseDown = false;
var str = “Mouse up”;
});
</script>

 

 

Fixed column width and text overflow

table
{
table-layout:fixed; //will fix the width, may not necessary
}

</code>
p.test {
	white-space: nowrap;         //all text go to one line
	width: 100%;
	overflow: hidden;            //extra text will be hiden
	text-overflow: ellipsis;     //three periods append to the text
}

set width for rich:datatable

<rich:dataTable id="itemsTable" style="width:930px;" value="#{scheduleItems}">

<rich:column id="addressCol" styleClass="#{scheduleItem.invoice.quote ? 'highlight' : '' }" style="width:120px;">
<code>