snap.svg放大缩小

var svg = Snap("#svg").drag();
//zoom 移入停止 svg zoom
var zoomFlag = true;
var scale = 1;
/* $(".box").hover(function(e){
     zoomFlag = false;
 },function(){
     zoomFlag = true;
 });*/
$(document).on("mousewheel DOMMouseScroll", function (e) {
    if (zoomFlag) {
        var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) ||
            (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));
        var m = new Snap.Matrix();
        var zoom = 0.08;
        if (delta > 0) {
            scale = scale + zoom;
        } else {
            if (scale == 1) {
                //return;
            }
            scale = scale - zoom;
        }
        console.log(scale);
        m.scale(scale, scale);
        svg.transform(m);
    }
});

转载于:https://my.oschina.net/u/2999760/blog/1553902

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
snap.svg 是一个强大的JavaScript库,用于创建和操作可扩展矢量图形(SVG)。要实现放大缩小功能,可以使用snap.svg提供的方法和属性。 首先,我们需要在HTML文件中引入snap.svg库,可以通过以下代码实现: ```html <script src="snap.svg.js"></script> ``` 然后,我们需要创建一个SVG容器,用于显示图形。可以使用以下代码创建一个宽度为500像素,高度为300像素的SVG容器: ```html <svg id="svgContainer" width="500" height="300"></svg> ``` 接下来,我们可以使用snap.svg库的方法创建图形,并将其添加到SVG容器中。例如,可以使用以下代码创建一个圆形: ```javascript var svg = Snap("#svgContainer"); var circle = svg.circle(100, 100, 50); ``` 现在,我们可以通过调用circle对象的transform方法来实现放大缩小。该方法接受一个参数,表示变换矩阵。我们可以使用scale方法创建一个缩放矩阵,并将其作为参数传递给transform方法。 例如,以下代码将圆形放大1.5倍: ```javascript circle.transform("s1.5"); ``` 同样地,以下代码将圆形缩小到原来的一半大小: ```javascript circle.transform("s0.5"); ``` 通过调用transform方法并传递不同的缩放矩阵,我们可以实现进一步的放大缩小操作。 总结来说,snap.svg库提供了简便的方式来创建和操作SVG图形,包括放大缩小。通过使用scale方法和transform方法,我们可以轻松地实现图形的放大缩小功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值