質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

560閲覧

マスクさせるレイヤーを指定したい

Sotunknown

総合スコア13

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1グッド

1クリップ

投稿2019/05/01 00:10

編集2019/05/01 00:12

使用したjsテンプレートを改造しています
data-mklineは元々黒色をマスクするものですが、マスク指定カラーを白に変え、
キャンバス全体をマスクではなく一つのレイヤー(mklayer="8")を指定してマスクさせたいのですが
コードをどう変えてもわからず理解不能に陥っています

JavaScript

1Maker = function(){ 2 3 //■処理 // 4 5 /** 6 @brief アイコン画像を更新する。 7 */ 8 this.updateResultImage = function() // 9 { 10 this.resultContext.clearRect( 0 , 0 , this.resultCanvas.width , this.resultCanvas.height ); 11 12 for( var $i = 0 ; this.maxLayer >= $i ; ++$i ) //全てのレイヤーを処理 13 { 14 var $image = document.querySelector( '[data-mklayer="' + $i + '"][data-mkselect]' ); 15 16 if( $image ) //選択されている素材がある場合 17 { 18 if( $image.getAttribute( 'data-mkclip' ) ) 19 { this.clipImage( $image ); } 20 else if( $image.getAttribute( 'data-mkcolor' ) ) 21 { this.drawColorImage( $image ); } 22 else 23 { this.drawImage( $image ); } 24 } 25 } 26 27 this.resultImage.setAttribute( 'src' , this.resultCanvas.toDataURL() ); 28 } 29 30 /** 31 @brief 指定の画像を内部キャンバスに描画する。 32 */ 33 this.drawImage = function( $iImage ) // 34 { 35 this.workContext.clearRect( 0 , 0 , this.workCanvas.width , this.workCanvas.height ); 36 this.workContext.drawImage( $iImage , 0 , 0 , this.workCanvas.width , this.workCanvas.height ); 37 38 var $image = this.workContext.getImageData( 0 , 0 , this.workCanvas.width , this.workCanvas.height ); 39 40 for( var $i = 0 ; $image.data.length > $i ; $i += 4 ) //全てのピクセルを処理 41 { 42 $image.data[ $i ] = this.lineColor.red * ( 255 - $image.data[ $i ] ) + this.fillColor.red * $image.data[ $i ]; 43 $image.data[ $i + 1 ] = this.lineColor.green * ( 255 - $image.data[ $i + 1 ] ) + this.fillColor.green * $image.data[ $i + 1 ]; 44 $image.data[ $i + 2 ] = this.lineColor.blue * ( 255 - $image.data[ $i + 2 ] ) + this.fillColor.blue * $image.data[ $i + 2 ]; 45 } 46 47 this.workContext.putImageData( $image , 0 , 0 ); 48 this.resultContext.drawImage( this.workCanvas , 0 , 0 , this.resultCanvas.width , this.resultCanvas.height ); 49 } 50 51 /** 52 @brief 指定の画像を色を変更せずに内部キャンバスに描画する。 53 */ 54 this.drawColorImage = function( $iImage ) // 55 { this.resultContext.drawImage( $iImage , 0 , 0 , this.resultCanvas.width , this.resultCanvas.height ); } 56 57 /** 58 @brief 指定の画像を使って内部キャンバスをマスクする。 59 */ 60 this.clipImage = function( $iImage ) // 61 { 62 this.workContext.clearRect( 0 , 0 , this.workCanvas.width , this.workCanvas.height ); 63 this.workContext.drawImage( $iImage , 0 , 0 , this.workCanvas.width , this.workCanvas.height ); 64 65 var $workImage = this.workContext.getImageData( 0 , 0 , this.workCanvas.width , this.workCanvas.height ); 66 var $resultImage = this.resultContext.getImageData( 0 , 0 , this.resultCanvas.width , this.resultCanvas.height ); 67 68 for( var $i = 0 ; $resultImage.data.length > $i ; $i += 4 ) //全てのピクセルを処理 69 { 70 $resultImage.data[ $i + 3 ] = ( $resultImage.data[ $i + 3 ] - $workImage.data[ $i + 3 ] ); 71 $workImage.data[ $i + 3 ] = ( 255 * 3 - $workImage.data[ $i ] - $workImage.data[ $i + 1 ] - $workImage.data[ $i + 2 ] ) / 3 * $workImage.data[ $i + 3 ] / 255; 72 73 $workImage.data[ $i ] = this.lineColor.red * 255; 74 $workImage.data[ $i + 1 ] = this.lineColor.green * 255; 75 $workImage.data[ $i + 2 ] = this.lineColor.blue * 255; 76 } 77 78 this.resultContext.putImageData( $resultImage , 0 , 0 ); 79 this.workContext.putImageData( $workImage , 0 , 0 ); 80 this.resultContext.drawImage( this.workCanvas , 0 , 0 , this.resultCanvas.width , this.resultCanvas.height ); 81 } 82 83 /** 84 @brief 指定の画像を選択状態にする。 85 */ 86 this.selectImage = function( $iImage ) // 87 { 88 var $layer = $iImage.getAttribute( 'data-mklayer' ); 89 var $image = document.querySelector( '[data-mklayer="' + $layer + '"][data-mkselect]' ); 90 91 $image.setAttribute( 'class' , $image.getAttribute( 'class' ).replace( 'mkselect' , '' ) ); 92 $image.removeAttribute( 'data-mkselect' ); 93 $iImage.setAttribute( 'class' , $iImage.getAttribute( 'class' ) + ' mkselect' ); 94 $iImage.setAttribute( 'data-mkselect' , true ); 95 } 96 97 /** 98 @brief 指定の色を使用する。 99 */ 100 this.selectColor = function( $iColor ) 101 { 102 var $lineColor = $iColor.getAttribute( 'data-mkline' ); 103 var $fillColor = $iColor.getAttribute( 'data-mkfill' ); 104 105 if( $lineColor ) //ラインの色指定がある場合 106 { 107 var $color = $lineColor.split( ',' ); 108 109 this.lineColor.red = parseFloat( $color[ 0 ] ); 110 this.lineColor.green = parseFloat( $color[ 1 ] ); 111 this.lineColor.blue = parseFloat( $color[ 2 ] ); 112 113 var $current = document.querySelector( '[data-mkline][data-mkselect]' ); 114 115 $current.setAttribute( 'class' , $current.getAttribute( 'class' ).replace( 'mkselect' , '' ) ); 116 $current.removeAttribute( 'data-mkselect' ); 117 $iColor.setAttribute( 'class' , $iColor.getAttribute( 'class' ) + ' mkselect' ); 118 $iColor.setAttribute( 'data-mkselect' , true ); 119 } 120 121 if( $fillColor ) //塗りつぶしの色指定がある場合 122 { 123 var $color = $fillColor.split( ',' ); 124 125 this.fillColor.red = parseFloat( $color[ 0 ] ); 126 this.fillColor.green = parseFloat( $color[ 1 ] ); 127 this.fillColor.blue = parseFloat( $color[ 2 ] ); 128 129 var $current = document.querySelector( '[data-mkfill][data-mkselect]' ); 130 131 $current.setAttribute( 'class' , $current.getAttribute( 'class' ).replace( 'mkselect' , '' ) ); 132 $current.removeAttribute( 'data-mkselect' ); 133 $iColor.setAttribute( 'class' , $iColor.getAttribute( 'class' ) + ' mkselect' ); 134 $iColor.setAttribute( 'data-mkselect' , true ); 135 } 136 } 137 138 //■初期化 // 139 140 this.resultImage = document.querySelector( 'IMG[data-mkresult]' ); 141 this.layerImage = document.querySelectorAll( 'IMG[data-mklayer]' ); 142 this.lineColors = document.querySelectorAll( '[data-mkline]' ); 143 this.fillColors = document.querySelectorAll( '[data-mkfill]' ); 144 this.resultCanvas = document.createElement( 'canvas' ); 145 this.resultContext = this.resultCanvas.getContext( '2d' ); 146 this.workCanvas = document.createElement( 'canvas' ); 147 this.workContext = this.workCanvas.getContext( '2d' ); 148 this.lineColor = { 'red' : 0 , 'green' : 0 , 'blue' : 0 }; 149 this.fillColor = { 'red' : 1 , 'green' : 1 , 'blue' : 1 }; 150 this.maxLayer = 0; 151 152 if( !this.resultImage ) //出力先のIMGタグを絞り込めない場合 153 { throw 'アイコンの出力先を設定できません。「data-mkresult」属性を持つIMGタグをページ内のどこかに"1つだけ"記述してください。'; } 154 155 if( !this.layerImage.length ) //素材のIMGタグが見つからない場合 156 { throw 'アイコン素材が1つもありません。「data-mklayer」属性を持つIMGタグをページ内のどこかに記述してください。'; } 157 158 this.resultCanvas.width = this.resultImage.getAttribute( 'width' ); 159 this.resultCanvas.height = this.resultImage.getAttribute( 'height' ); 160 this.workCanvas.width = this.resultImage.getAttribute( 'width' ); 161 this.workCanvas.height = this.resultImage.getAttribute( 'height' ); 162 163 var $maker = this; 164 165 for( var $i = 0 ; this.layerImage.length > $i ; ++$i ) //全てのアイコン素材を処理 166 { 167 var $image = this.layerImage[ $i ]; 168 169 $image.addEventListener( 'click' , function(){ $maker.selectImage( this ); $maker.updateResultImage(); } ); 170 $image.addEventListener( 'mouseover' , function(){ addTooltip( this ); } ); 171 $image.addEventListener( 'mouseout' , function(){ deleteTooltip( this ); } ); 172 173 if( $image.getAttribute( 'data-mkselect' ) ) //初期選択値の場合 174 { this.selectImage( $image ); } 175 176 if( this.maxLayer < $image.getAttribute( 'data-mklayer' ) ) //現在のレイヤーカウントより大きい場合 177 { this.maxLayer = $image.getAttribute( 'data-mklayer' ); } 178 } 179 180 for( var $i = 0 ; this.lineColors.length > $i ; ++$i ) //全てのライン色を処理 181 { 182 var $color = this.lineColors[ $i ]; 183 184 $color.addEventListener( 'click' , function(){ $maker.selectColor( this ); $maker.updateResultImage(); } ); 185 186 if( $color.getAttribute( 'data-mkselect' ) ) //初期選択値の場合 187 { this.selectColor( $color ); } 188 } 189 190 for( var $i = 0 ; this.fillColors.length > $i ; ++$i ) //全ての塗りつぶし色を処理 191 { 192 var $color = this.fillColors[ $i ]; 193 194 $color.addEventListener( 'click' , function(){ $maker.selectColor( this ); $maker.updateResultImage(); } ); 195 196 if( $color.getAttribute( 'data-mkselect' ) ) //初期選択値の場合 197 { this.selectColor( $color ); } 198 } 199 200 this.updateResultImage(); 201}; 202 203function addTooltip( $iImage ) 204 { 205 var $span = document.createElement( 'span' ); 206 var $innerSpan = document.createElement( 'span' ); 207 208 $span.setAttribute( 'class' , 'mktooltipcontainer' ); 209 $innerSpan.setAttribute( 'class' , 'mktooltip' ); 210 $innerSpan.innerText = $iImage.getAttribute( 'alt' ); 211 212 $span.appendChild( $innerSpan ); 213 $iImage.parentNode.insertBefore( $span , $iImage ); 214 } 215 216function deleteTooltip( $iImage ) 217 { document.querySelector( '.mktooltip' ).parentNode.removeChild( document.querySelector( '.mktooltip' ) ); } 218 219//★処理 // 220 221window.addEventListener( 'load' , function(){ new Maker(); } ); 222

マスクした白色を変えるHTML

HTML

1<span class="border block" style="background-color:#799ea6" data-mkfill="0.475, 0.620, 0.651">&nbsp;</span>

指定させたいレイヤーのHTMLの一部

HTML

1data-mklayer="8" data-mkcolor="true"
bochan2👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

もうあきらめたのでいいです

投稿2021/05/04 04:11

Sotunknown

総合スコア13

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問