Question

我有这个SVG广场，我想能够旋转和拖动，我怎么能用Raphael JS来做这个？

这是我想要操纵的SVG：

<svg width="100" height="100"><rect width="300" height="100" style="fill:rgb(0,0,0);stroke-width:3;stroke:rgb(0,0,0)" /></svg>

Answer 1

Raphael.Freetransform处理单个元素和集合的拖动，旋转和缩放。

 var paper = Raphael('holder');

    var rect = paper
        .rect(200, 200, 100, 100)
        .attr('fill', '#f00');

    // Add freeTransform
    var ft = paper.freeTransform(rect);

    // Hide freeTransform handles
    ft.hideHandles();

    // Show hidden freeTransform handles
    ft.showHandles();

    // Apply transformations programmatically
    ft.attrs.rotate = 45;

    ft.apply();

    // Remove freeTransform completely
    ft.unplug();

    // Add freeTransform with options and callback
    ft = paper.freeTransform(rect, { keepRatio: true }, function(ft, events) {
        console.log(ft.attrs);
    });

    // Change options on the fly
    ft.setOpts({ keepRatio: false });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://alias.io/raphael/free_transform/raphael.js"></script>
<script src="https://alias.io/raphael/free_transform/raphael.free_transform/raphael.free_transform.js"></script>
<div id="holder"></div>

我怎样才能使用Raphael JS进行自由变换？

1 个答案: