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

2021-10-26T12:55:00-07:00 2021-10-28T19:30:00Z Javascript

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

以下コード

```javascript
    //シーンクラス内で  
    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に設定してお使いください。
    テキストがテキストボックス内に表示しきれなくなった時点からスクロールができます。

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

0 件のコメント :

コメントを投稿

プロフィール

人気記事

ラベル