Home > スポンサー広告 > User JavaScriptの練習 - 二点間の距離を測る

スポンサーサイト

スポンサー広告

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comments:-

Comment Form

Trackback+Pingback:-

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/91-30ee5dca
Listed below are links to weblogs that reference
スポンサーサイト from Karafuto Blog

Home > スポンサー広告 > User JavaScriptの練習 - 二点間の距離を測る

Home > user javascript > User JavaScriptの練習 - 二点間の距離を測る

User JavaScriptの練習 - 二点間の距離を測る

user javascript

Operaで役に立たない User JavaScriptを書いています。

スクリプトの流れ

  1. ページをクリックして、始点を決める。
  2. もう一回クリックして、終点を決める。
  3. 二点を結ぶ線を引き、間の距離を左上に表示する。
  4. 再度クリックすると、点、線、ツールチップを消す。
// ==UserScript==
// @include *
// @exclude
// ==/UserScript==

document.addEventListener('load', function() {

    // canvas要素の作成
    var canvas = document.createElement('canvas');
    var height = window.getComputedStyle(document.body, '').getPropertyValue('height');
    var width = window.getComputedStyle(document.body, '').getPropertyValue('width');
    canvas.setAttribute('height', height);
    canvas.setAttribute('width', width);
    canvas.style.cssText = 'position: absolute;' + 'top: 0;' + 'left: 0;' + 'z-index: 100;';
    document.body.appendChild(canvas);
    // 描画コンテクストを取得
    var context = canvas.getContext('2d');

    //ツールチップ
    var tooltip = document.createElement('div');
    tooltip.style.cssText = 'position: fixed;' + 'top: 0px;' + 'left: 0px;' + 'z-index: 102;' + 
                            'padding: 6px;' + 'font-family: sans-serif;' + 'font-size: 16px;' + 'color: black;' + 
                            'background-color: white;' + 'opacity: 0.7;' + 'display: none;';
    document.body.appendChild(tooltip);


    var Lineto = function() {
        this.state = 0;
    }
    Lineto.prototype.draw = function() {
        // 線を引く
        context.beginPath();
        context.strokeStyle = 'red';
        context.moveTo( pin[0].x, pin[0].y);
        context.lineTo( pin[1].x, pin[1].y);
        context.stroke();
        context.closePath();
        // 距離を測る
        var w = Math.abs( pin[0].x - pin[1].x );
        var h = Math.abs( pin[0].y - pin[1].y )
        var text = '\u59CB\u70B9 :  ' + pin[0].x + ' , ' + pin[0].y + '\n' + '\u7D42\u70B9 :  ' + pin[1].x +
                   ' , ' + pin[1].y + '\n';
        text += '\u8DDD\u96E2 :  ' + Math.round( Math.sqrt( Math.pow( w, 2) + Math.pow( h, 2))) + '\n';
        text += '\u5E45 :    ' + w + '\n' + '\u9AD8\u3055 :  ' + h + '\n'
        
        tooltip.innerText = text;
        tooltip.style.display = '';
    }

    var Point = function( x, y) {
        this.x = x;
        this.y = y;
    }
    Point.prototype.fix = function( ) {
        // 円を描く
        context.beginPath();
        context.fillStyle = 'red';
        context.arc( this.x, this.y, 5, 0, Math.PI * 2, false);
        context.fill();
        context.closePath();
    }
    var pin = [];
    var line = new Lineto;


    document.addEventListener('click', function(e) {
    
        if ( line.state < 2 ) {
            pin [ line.state] = new Point( e.clientX + document.body.scrollLeft, e.clientY + document.body.scrollTop );
            pin [ line.state] .fix();
            if ( line.state == 1 ) {
                line.draw();
            }
            line.state ++;
        } else {
            // 画面をクリア
            context.globalCompositeOperation = 'destination-out';
            context.fillRect(0,0,parseInt(width),parseInt(height));
            context.globalCompositeOperation = 'source-over';
            tooltip.style.display = 'none';
            line.state = 0;
        }
        e.stopPropagation();
        e.preventDefault();
    }, false);
}, false);

Enterキーでもクリックイベントが発生してしまうことに今頃気づいた。

参考

Canvas tutorial - MDC

Comments:0

Comment Form

Trackback+Pingback:0

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/91-30ee5dca
Listed below are links to weblogs that reference
User JavaScriptの練習 - 二点間の距離を測る from Karafuto Blog

Home > user javascript > User JavaScriptの練習 - 二点間の距離を測る

おまかせリンク(R)
全記事表示リンク
Search
Meta
Feeds

Page Top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。