JavaScript
1Maker = function(){2 3//■処理 //4 5/* @brief アイコン画像を更新する。*/6this.updateResultImage = function() {7this.resultContext.clearRect( 0 , 0 , this.resultCanvas.width , this.resultCanvas.height );8 9 for( var $i = 0 ; this.maxLayer >= $i ; ++$i ) //全てのレイヤーを処理10 {11 var $image = document.querySelector( '[data-layer="' + $i + '"][data-select]' );12 13 if( $image ) //選択されている素材がある場合14 {15 if( $image.getAttribute( 'data-color' ) )16 { this.drawColorImage( $image ); }17 else18 { this.drawImage( $image ); }19 }20}21this.resultImage.setAttribute( 'src' , this.resultCanvas.toDataURL() );22}23 24/* @brief 指定の画像を内部キャンバスに描画する。 */25this.drawImage = function( $iImage ) {26this.workContext.clearRect( 0 , 0 , this.workCanvas.width , this.workCanvas.height );27this.workContext.drawImage( $iImage , 0 , 0 , this.workCanvas.width , this.workCanvas.height );28 29var $image = this.workContext.getImageData( 0 , 0 , this.workCanvas.width , this.workCanvas.height );30 31this.workContext.putImageData( $image , 0 , 0 );32this.resultContext.drawImage( this.workCanvas , 0 , 0 , this.resultCanvas.width , this.resultCanvas.height );33}34 35/* @brief 指定の画像を選択状態にする。*/36this.selectImage = function( $iImage ) {37 var $layer = $iImage.getAttribute( 'data-layer' );38 var $image = document.querySelector( '[data-layer="' + $layer + '"][data-select]' );39 40 $image.setAttribute( 'class' , $image.getAttribute( 'class' ).replace( 'select' , '' ) );41 $image.removeAttribute( 'data-select' );42 $iImage.setAttribute( 'class' , $iImage.getAttribute( 'class' ) + ' select' );43 $iImage.setAttribute( 'data-select' , true );44}45 46//■初期化 //47 48this.resultImage = document.querySelector( 'IMG[data-result]' );49this.layerImage = document.querySelectorAll( 'IMG[data-layer]' );50this.resultCanvas = document.createElement( 'canvas' );51this.resultContext = this.resultCanvas.getContext( '2d' );52this.workCanvas = document.createElement( 'canvas' );53this.workContext = this.workCanvas.getContext( '2d' );54this.maxLayer = 0;55 56 if( !this.resultImage ) //出力先のIMGタグを絞り込めない場合57 { throw 'アイコンの出力先を設定できません。「data-result」属性を持つIMGタグをページ内のどこかに"1つだけ"記述してください。'; }58 59 if( !this.layerImage.length ) //素材のIMGタグが見つからない場合60 { throw 'アイコン素材が1つもありません。「data-layer」属性を持つIMGタグをページ内のどこかに記述してください。'; }61 62this.resultCanvas.width = this.resultImage.getAttribute( 'width' );63this.resultCanvas.height = this.resultImage.getAttribute( 'height' );64this.workCanvas.width = this.resultImage.getAttribute( 'width' );65this.workCanvas.height = this.resultImage.getAttribute( 'height' );66 67 var $maker = this;68 69 for( var $i = 0 ; this.layerImage.length > $i ; ++$i ) //全てのアイコン素材を処理70 {71 var $image = this.layerImage[ $i ];72 73 $image.addEventListener( 'click' , function(){ $maker.selectImage( this ); $maker.updateResultImage(); } );74 $image.addEventListener( 'mouseover' , function(){ addTooltip( this ); } );75 $image.addEventListener( 'mouseout' , function(){ deleteTooltip( this ); } );76 77 if( $image.getAttribute( 'data-select' ) ) //初期選択値の場合78 { this.selectImage( $image ); }79 80 if( this.maxLayer < $image.getAttribute( 'data-layer' ) ) //現在のレイヤーカウントより大きい場合81 { this.maxLayer = $image.getAttribute( 'data-layer' ); }82 }83 84this.updateResultImage();85};86 87function addTooltip( $iImage )88 {89 var $span = document.createElement( 'span' );90 var $innerSpan = document.createElement( 'span' );91 92 $span.setAttribute( 'class' , 'tooltipcontainer' );93 $innerSpan.setAttribute( 'class' , 'tooltip' );94 $innerSpan.innerText = $iImage.getAttribute( 'alt' );95 96 $span.appendChild( $innerSpan );97 $iImage.parentNode.insertBefore( $span , $iImage );98 }99 100function deleteTooltip( $iImage )101 { document.querySelector( '.tooltip' ).parentNode.removeChild( document.querySelector( '.tooltip' ) ); }102 103//★処理 //104 105window.addEventListener( 'load' , function(){ new Maker(); } );106
0 コメント