0

私はsvgエディター2.7バージョンで作業しています。ここでは、javascriptを使用してsvgの長方形の個々の境界値を選択する必要があります。

<svg width="9000" height="100" style="border:1px solid black">
<rect x="9000" y="0" height="100" width="200"></rect>
</svg>

長方形オリジナル

私の長方形はこの選択されたツールを取得していますが、下の画像のように長方形の個々のコーナーを選択する必要があります

長方形の結果

svg編集ファイルには、mousedown、mousemove、およびmouseupイベントが含まれています。ここでは、GETBBOX()関数を使用して境界値を取得しました。しかし、上の画像2のように選択のために境界を分割する必要があります。ここでは、svgで長方形の境界を取得するためのマウスオーバーイベントに取り組んでいます。しかし、私はそれを達成しませんでした。これについて親切に私を導くか、正しい方法に私をドラッグしてください。

var mouseOver = function(evt) {
        evt.preventDefault();
        var root_sctm = $('#svgcontent g')[0].getScreenCTM().inverse();
        var pt = svgedit.math.transformPoint( evt.pageX, evt.pageY, root_sctm ),
        mouse_x = pt.x * current_zoom,
        mouse_y = pt.y * current_zoom;
        var x = mouse_x / current_zoom,
        y = mouse_y / current_zoom,
        mouse_target = getMouseTarget(evt);
        mouse_target =selectedElements[0];
    switch (current_mode) {

            case 'rect':
                var test =selectedElements[0].getBBox();
                console.log(test);
            break;
    }
4

2 に答える 2

1

あなたが尋ねたことをよく理解できたと思います。

要素の境界を取得したい場合はgetBoundingClientRect() 、javascript の関数を使用できます

元：

 document.getElementsByTagName('rect')[0].getBoundingClientRect()
 document.getElementsByTagName('rect')[1].getBoundingClientRect()

これにより、、、、、 widthおよび値が得heightられleftますtopbottomright

四角形の余白を選択したい場合は、それは不可能だと思います。四角形を構築する必要がありますsvg-lines

于 2014-09-22T09:18:41.130 に答える