0

RaphaelJSでオブジェクトをドラッグする方法はすでに見つけました。

しかし今、動的に印刷されたテキストのサイズを変更し、RaphaelJSでこの「オブジェクト」の新しい幅/高さを取得できるかどうかを知りたいと思います。

これが私が達成したいことの最初の見方です：

$(function() {
var R = Raphael("holder", 400, 400);
$("#typetext").keyup(function() {
    var textValue = $(this).val();
    R.clear();
    var c = R.print(100, 100, textValue, R.getFont("Arial"), 60).attr({
        fill: "#ff0000",
        cursor: "move"
    });
    var start = function() {
        this.odx = 0;
        this.ody = 0;
        this.animate({
            "fill-opacity": 0.2
        }, 500);
    },
        move = function(dx, dy) {
            this.translate(dx - this.odx, dy - this.ody);
            this.odx = dx;
            this.ody = dy;
        },
        up = function() {
            this.animate({
                "fill-opacity": 1
            }, 500);
        };
    c.drag(move, start, up);
}); 
});​

デモ： http： //jsfiddle.net/ZuYcG/

アドバイスをいただければ幸いです。

編集：このフィドルは、私が何をする必要があるかについての考えを与えますが、印刷されたテキストを使用します。

EDIT2：印刷されたテキストはSVG構造のパスによって定義されており、パスの幅と高さを取得できないようです...

4

1 に答える 1

2

使用するパス生成ルーチンに異なるピクセル高さをフィードする場合のように、「再印刷」することはできませんprint。ただし、テキストを特定の合理的な境界内にスケーリングすることに関心がある場合は、パスのバウンディング ボックスを取得し、キャンバスの幅と高さに収まるようにスケーリングすることができます。

var bbox = c.getBBox();
if ( bbox.x + bbox.width > $(R.canvas).width() )
{
    var scale = ( $(R.canvas).width() - bbox.x) / bbox.width;
    c.scale( scale, scale, bbox.x, bbox.y  );
}

機能はここで示されます。

于 2012-12-10T18:27:58.687 に答える