1

KineticJSで.toImage（）メソッドを使用すると、実際に必要な画像よりもはるかに大きな画像が常に取得されるように見えます。必要な部分は、データ画像の左上隅のみです。私のステージは、ウィンドウサイズと事前定義された初期サイズに基づいてスケーリングされます（ウィンドウサイズ変更時に、コンテナーのスケールとサイズを設定するステージサイズ変更関数が呼び出されます）。これを補正するためにtoImage（）を使用する場合、ある種の切り抜きを設定する必要がありますか？画像を見ると、全体の画像は必要なサイズの約2倍に見えますが、スケールが0.5前後の場合、必要なピースは必要なサイズの約半分になります（ステージは約半分のサイズです。 Chromeを使用し、デバッグのために下部の開発者バーを開いたままにします）。

これが私が今使っているものです：

desc.toImage({
    width: sideW / cvsObj.scale,
    height: sideH / cvsObj.scale,
    callback: function(img) {
        desc.hide();
        sideImg.transitionTo({x : sideW / 2, width : 0, duration : 0.25, callback : function() {
            // add image to emulate content
            var params = {name : 'descimg', width : sideW, height : sideH, image : img, x : sideW / 2, y : 0};
            var image = new Kinetic.Image(params);
            side.add(image);
            image.setWidth(1);
            sideImg.hide();
            image.transitionTo({x : 0, width : sideW, duration : 0.25, callback : function() {
                side.add(desc);
                desc.show();
                image.hide();
                cvsObj.page.draw();
            }});
        }});
    }
});
4

2 に答える 2

0

時間の経過とともにKineticJが改善され、関数は最近「より良い」方法で機能します。新しいKineticJS4.3をお試しください。

 http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.3.0.min.js
于 2013-01-11T16:51:51.670 に答える
0

この質問を2か月半前に投稿しましたが、今日まで返信はありませんでした。私はKineticJSの最新情報を入手しており、独自のバグレポートやコードの提案も追加しています。ただし、最近、コードのこの特定のセクションを再検討して、もう少し良いものを思いつきました。戻ってきた画像は適切にトリミングされ、そのままキャンバスレイヤーに挿入できるようになりました。コードは次のとおりです。

// grp = kinetic group, iw = image width, ih = image height, rimg = returned image array for a deferred function, cvsobj.scale is a global stage scale variable (i scale the stage to fit the window)
getImage : function(grp, iw, ih, rimg) {
    var dfr = $.Deferred();
    var gp = grp.getAbsolutePosition();
    grp.toImage({
        width: iw * cvsObj.scale,
        height: ih * cvsObj.scale,
        x : gp.x,
        y : gp.y,
        callback: function(img) {
            rimg.push(img);
            dfr.resolve(rimg);
        }
    });
    return dfr.promise();
}

これは拡張されたプロトタイプ機能です。これは、レイヤー全体またはレイヤーのセクションをアニメーションシーケンスで操作するための画像に変換するためのサブセクション機能の一部です。うまくいけば、これは他の誰かを助けるでしょう。

于 2013-01-11T17:28:57.457 に答える