2015年4月
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30    
無料ブログはココログ

« peperJSON/strokeJSON の罠? 謎? 仕様? バグ? | トップページ | コピペシール update:また失敗 »

2014年4月29日 (火)

白いシールに影を付けて見えるようにするシール

stroke の新規追加はあきらめましたが…

MOONPhase ver.2.9.0 での getStrokeJSON() では、外部ストロークの要素数を変更できない、とか…

Getstrokejson290

「じゃあ、白紙に最初にストロークを登録するときと、ストローク消去はどないせいっちゅうねん」、と言いたいところなのですが、とりあえず、既存のストロークを加工するなら問題ないと考えてよさそうです

と、いうことで、既存のストロークをいじるだけで済むシールを一つ作りました。

白くて見えないシールのストロークに影をつけて、見やすくするシール

Download : 「シールのストロークに影をつけるシール」

MOONPhase ver.2.9.0 になって画面描画周りが改修された影響で、黒背景に白いペンで書いて作ったシールが、白背景に張り付けると見えなくなってしまいました。

たとえば、清水さん謹製の「手書きで太さ変更」シール、シール台帳に貼った状態ではよく視認できます。

Screenshot_20140429022550

これを白背景のページに張り付けると…

Screenshot_20140429022631

上の画面には、シールが貼ってあるのですが、全く見えません。ver.2.8.0 以前では、い~感じに周囲に黒い縁取りがついてて見えたのですが。もっとも今の描画の方が、まっとうなのかもしれません。

Screenshot_20140429022659

そこで、「シールのストロークに影をつけるシール」を使います。

Screenshot_20140429022711

シールをタップすると、ページ上の全てのシールが強調表示されます。見えないシールがどこにあるのか、わからないままだと困りますから。

ここで、ページ上部に(見えないまま)貼りついている 「手書きで太さ変更」の部分をタップすると、このシールが操作対象として選ばれ、ストロークに影が付きます。

Screenshot_20140429022731

影のついたシールを改めてシール台帳に save すると、こんな感じです。上がオリジナル、下が影付きです。

Screenshot_20140429022754

ストロークに影を付ける部分の処理を抜去します。元のストロークの色を変えて、座標を右下に数ピクセルずらしたものを、本来のストロークの直前に描くようにデータを変更しています。

function shadowStroke( stickerID ){
    var _CONST = {
        offset: 3
    };

    function invertColor( orgColor ){
        var rgba = MOON.int2rgba( orgColor );
        return MOON.rgba2int( 255 - rgba[0], 255 - rgba[1], 255 - rgba[2], rgba[3] );
    }

    var baseExtStrokes = MOON.getStrokeJSON( stickerID );
    var shadowExtStrokes = MOON.getStrokeJSON( stickerID );
    var newExtStrokes = [];

    for ( var i = 0, eLen = baseExtStrokes.length; i < eLen; i++ ){
        var baseStrokes = baseExtStrokes[i].strokes;
        var shadowStrokes = shadowExtStrokes[i].strokes;
        var oneExtStroke = {strokes: []};

        for ( var j = 0, sLen = shadowStrokes.length; j < sLen; j++ ){
            var oneStroke = shadowStrokes[j];
            oneStroke.color = invertColor( oneStroke.color );

            for ( var k = 0, dLen = oneStroke.data.length; k < dLen; k += 3 ){
                oneStroke.data[k] += _CONST.offset;
                oneStroke.data[k +1] += _CONST.offset;
            }
            oneExtStroke.strokes.push( oneStroke, baseStrokes[j] );
        }
        newExtStrokes.push( oneExtStroke );
    }

    MOON.setStrokeJSON( stickerID, newExtStrokes );
}

役に立つのは「白くて見えないシール」の場合だけではありません。逆に、白背景に黒いペンで書いたシールの場合。

Screenshot_20140429022947

上図ページの "TEST" シールをシール台帳に save してみます。

Screenshot_20140429023035

このスクリーンショット画像では結構はっきり見えますが、実際の MOON の液晶では、この "TEST" という文字は、かなり視認性が低くなっています。

Screenshot_20140429023049

そこで、この "TEST" にも 「シールのストロークに影をつけるシール」を適用します。黒文字に白い影がつくので、ページ上では何の変化もないように見えます。

しかし、適用してからシール台帳に save すると、こうなります。

Screenshot_20140429023147

今後は、この白い影を付けたシールを原本とすれば、シール台帳上でも視認しやすいですし、もちろん黒背景のページに張り付けても一目瞭然です。

いずれ、システム側で何か対策を施すのかもしれませんが、それまでは、このシールで一時しのぎを。

Download : 「シールのストロークに影をつけるシール」

« peperJSON/strokeJSON の罠? 謎? 仕様? バグ? | トップページ | コピペシール update:また失敗 »

enchantMOON」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1527616/55982538

この記事へのトラックバック一覧です: 白いシールに影を付けて見えるようにするシール:

« peperJSON/strokeJSON の罠? 謎? 仕様? バグ? | トップページ | コピペシール update:また失敗 »