📖

Phina.jsテキストのスクロール実装について

1 min read
  • Phina.jsのテキスト(ラベル)スクロールについて
    Phina.jsを使用してアプリ開発をしていたところテキストのスクロールが必要な場面に遭遇したのですがネットで調べてもそれらしい記事が少なかったこととライブラリのコードをみたところ機能自体はあるようなのでそれを利用したコードを掲載します。
    テキストのスクロールはLabelAreaクラスの変数scrollYを使うことで可能なようです。

    以下コード

    //シーンクラス内で  
    this.group = DisplayElement().addChildTo(this);  
    var self = this;  
    this.labelArea = LabelArea({  
    text: "スクロール",  
    width: 580,  
    height: 320,  
    x:350,  
    y:780,  
    fill: "white",  
    stroke: null,  
    fontSize: 30,  
    }).addChildTo(this.group);  

    this.labelArea.setInteractive(true);  
    var physical = phina.accessory.Physical();  
    physical.friction = 0.8;  
    var lastForce = 0;  
    var lastMove = 0;  
    this.labelArea.on('pointstart', function(e){  
    lastForce = physical.velocity.y;  
    lastMove = 0;  
    physical.force(0, 0);  
    });  
    this.labelArea.on('pointmove', function(e){  
    var p = e.pointer.deltaPosition;  
    lastMove = p.y;  
    self.labelArea.scrollY -= 3*lastMove;         //スクロール処理
    });  
    this.labelArea.on('pointend', function(e){  
    physical.force(0, lastForce + lastMove);  
    });  
    window.onmousewheel = function(e){ //chrome限定です  
        self.labelArea.scrollY -= 0.9*e.wheelDelta ;     //スクロール処理
    } 

追記
スクロール範囲を0 <= scrollY <= 1行の高さ(ピクセル)×行数-self.labelArea.heightに設定してお使いください。
テキストがテキストボックス内に表示しきれなくなった時点からスクロールができます。

Discussion

ログインするとコメントできます