0

キーボードを使用して移動する SVG のオブジェクトがあります。

var svg = $('svg');
var avatar = svg.find('#avatar');
var left, top, right, bottom;
$(document).keydown(function(e) {
    var svg = avatar[0].ownerSVGElement;
    var matrix = avatar[0].getCTM();
    if (e.which === 37 || left) { //left
        matrix.translate(-1, 0);
        e.preventDefault();
        left = true;
    }
    if (e.which === 38 || top) { // top
        matrix.translate(0, -1);
        e.preventDefault();
        top = true;
    }
    if (e.which === 39 || right) { // right
        matrix.translate(1, 0);
        e.preventDefault();
        right = true;
    }
    if (e.which === 40 || bottom) { // bottom
        matrix.translate(0, 1);
        e.preventDefault();
        bottom = true;
    }
    avatar.attr('transform', matrix.asString());
}).keyup(function(e) {
    if (e.which === 37) {
        left = false;
    } else if (e.which === 38) {
        top = false;
    } else if (e.which === 39) {
        right = false;
    } else if (e.which === 40) {
        bottom = false;
    }
});

SVG でトレース (移動するアバターのパスを示す線) を追加するにはどうすればよいですか? アバターを動かしたときに見えるようにする必要があります。線だけでなく模様にもなればいいですね。

4

1 に答える 1

0

私は方法を見つけました。パスを配置し、キーダウンでそれに行を追加して（d属性に追加して）、パスを簡素化して、5回の移動ごとに行を配置する方法を見つけました。

var trace;
(function() {
    var start = $('#start')[0].getBBox();
    var x = start.x+(start.width/2);
    var y = start.y+(start.height/2);
    trace = $('<path/>').attr({
        id: 'trace',
        stroke: '#000',
        fill: 'none',
        d: 'M ' + x + ' ' + y
    }).appendTo(svg);
    // in normal case trace path need to be added before svg is inserted to the DOM
    // in my case I modify jquery library to use document.createElementNS instead of
    // document.createElement
    avatar.setPosition(x, y);
})();

var i = 0;
$(document).keydown(function(e) {

   ...
   if (++i % 5 === 0) {
        var avatar_size = avatar.size(); // size if jquery plugin that return width and height using BBox
        var x = matrix.matrix[0][2];
        var y = matrix.matrix[1][2];
        trace.attr('d', trace.attr('d') + ', ' + x + ' ' + y);
    }
});
于 2013-06-19T12:43:31.253 に答える