Permalink
Browse files

Add support for rendering rounded corners etc. on <img> tags -- the i…

…mg is set to transparent opacity and rendered as a top layer.
  • Loading branch information...
1 parent de695e5 commit b392f432797b1efaaabff522ca856f0113319ce3 Jason Johnston committed Nov 2, 2010
Showing with 128 additions and 0 deletions.
  1. +1 −0 build.xml
  2. +3 −0 sources/Element.js
  3. +79 −0 sources/ImgRenderer.js
  4. +45 −0 tests/img.html
  5. BIN tests/photo.jpg
View
@@ -41,6 +41,7 @@
<fileset file="${src_dir}/BorderImageRenderer.js" />
<fileset file="${src_dir}/BoxShadowOutsetRenderer.js" />
<fileset file="${src_dir}/BoxShadowInsetRenderer.js" />
+ <fileset file="${src_dir}/ImgRenderer.js" />
<fileset file="${src_dir}/Element.js" />
<fileset file="${src_dir}/PIE_API.js" />
<fileset file="${src_dir}/PIE_close.js" />
View
@@ -75,6 +75,9 @@ PIE.Element = (function() {
new PIE.BorderRenderer( el, boundsInfo, styleInfos, rootRenderer ),
new PIE.BorderImageRenderer( el, boundsInfo, styleInfos, rootRenderer )
];
+ if( el.tagName === 'IMG' ) {
+ childRenderers.push( new PIE.ImgRenderer( el, boundsInfo, styleInfos, rootRenderer ) );
+ }
rootRenderer.childRenderers = childRenderers; // circular reference, can't pass in constructor; TODO is there a cleaner way?
renderers = [ rootRenderer ].concat( childRenderers );
View
@@ -0,0 +1,79 @@
+/**
+ * Renderer for re-rendering img elements using VML. Kicks in if the img has
+ * a border-radius applied, or if the -pie-png-fix flag is set.
+ * @constructor
+ * @param {Element} el The target element
+ * @param {Object} styleInfos The StyleInfo objects
+ * @param {PIE.RootRenderer} parent
+ */
+PIE.ImgRenderer = PIE.RendererBase.newRenderer( {
+
+ boxZIndex: 6,
+ boxName: 'imgEl',
+
+ needsUpdate: function() {
+ var si = this.styleInfos;
+ return this.targetElement.src !== this._lastSrc || si.borderRadiusInfo.changed();
+ },
+
+ isActive: function() {
+ var si = this.styleInfos;
+ return si.borderRadiusInfo.isActive() || si.backgroundInfo.isPngFix();
+ },
+
+ updateSize: function() {
+ if( this.isActive() ) {
+ this.draw();
+ }
+ },
+
+ updateProps: function() {
+ this.destroy();
+ if( this.isActive() ) {
+ this.draw();
+ }
+ },
+
+ draw: function() {
+ this.hideActualImg();
+
+ var shape = this.getShape( 'img', 'fill', this.getBox() ),
+ fill = shape.fill,
+ bounds = this.boundsInfo.getBounds(),
+ w = bounds.w,
+ h = bounds.h,
+ borderProps = this.styleInfos.borderInfo.getProps(),
+ borderWidths = borderProps && borderProps.widths,
+ el = this.targetElement,
+ src = el.src,
+ round = Math.round,
+ s;
+
+ shape.stroked = false;
+ fill.type = 'frame';
+ fill.src = src;
+ shape.coordsize = w * 2 + ',' + h * 2;
+ shape.coordorigin = '1,1';
+ shape.path = this.getBoxPath( borderWidths ? {
+ t: round( borderWidths['t'].pixels( el ) ),
+ r: round( borderWidths['r'].pixels( el ) ),
+ b: round( borderWidths['b'].pixels( el ) ),
+ l: round( borderWidths['l'].pixels( el ) )
+ } : 0, 2 );
+ s = shape.style;
+ s.width = w;
+ s.height = h;
+
+ this._lastSrc = src;
+ },
+
+ hideActualImg: function() {
+ this.targetElement.runtimeStyle.filter = 'alpha(opacity=0)';
+ },
+
+ destroy: function() {
+ PIE.RendererBase.destroy.call( this );
+ this.targetElement.runtimeStyle.filter = '';
+ }
+
+} );
View
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+ <meta content="text/html; charset=UTF-8" http-equiv="content-type">
+ <title>&lt;img&gt; elements</title>
+
+ <style type="text/css">
+
+ img {
+ border-radius: 40px;
+ behavior: url(../build/PIE_uncompressed.htc);
+ border: 0;
+ }
+
+ #shadow {
+ -webkit-box-shadow: 0 0 10px red;
+ -moz-box-shadow: 0 0 10px red;
+ box-shadow: 0 0 10px red;
+ }
+
+ </style>
+
+</head>
+<body>
+
+ <h1>Images</h1>
+
+ <h2>Rounded corners</h2>
+ <img src="photo.jpg" />
+
+ <h2>Rounded, scaled down</h2>
+ <img src="photo.jpg" width="100" height="100" />
+
+ <h2>With shadow</h2>
+ <img src="photo.jpg" id="shadow" width="320" height="240" />
+
+ <h2>In link (should remain clickable)</h2>
+ <a href="#" onclick="alert('clicked'); return false;"><img src="photo.jpg" width="320" height="240" /></a>
+
+ <h2>With border</h2>
+ <img src="border.png" style="border:10px solid red;" />
+
+</body>
+</html>
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit b392f43

Please sign in to comment.