Angular2：如何使用 hammer.js 制作可移动的 svg 对象？

Question

我正在开发一个 angular2 应用程序，我正在使用 hammer.js 在我的组件视图中制作一个简单的矩形 svg 对象，我使用的方法包括使用 "pan action " 的锤子，它给了我每一个 deplacing 陈词滥调的 x 和 y 位置，我正在影响那些 x 和 y 到我的 svg 矩形的 x 和 y attribtes，问题是即使我也没有做这个矫揉造作' m 在控制台中查看操作的 x 和 y 的值，

有没有想过将 depalcement 的值传递到 svg 元素位置？？？

这是我的代码：

观点：

<div>
        <svg class="simulation">
            <rect id="test1" x="{{NX}}" y="{{NY}}" height="150" width="200"
                  style="stroke:#EC9A20;stroke-width: 15; fill: none"/>

        </svg>
    </div>

和TS.file：

 export class ContentComponent implements AfterViewInit{
 static hammerInitialized = false;
    public NX:any ;
    public NY:any ;

    ngAfterViewInit():any {
            console.log('in ngAfterViewInit');
            if (!ContentComponent.hammerInitialized) {

                var myElement = document.getElementById('test1');//indiquer ici l'element
                var animation = new Hammer(myElement);

                animation.get('pan').set({direction:Hammer.DIRECTION_ALL})

                animation.on("panleft panright panup pandown tap press",
                                    (ev):any => {

                                        myElement.textContent = ev.type +" gesture detected.";
                                        console.log(ev);


                                        this.NX=ev.center.x;
                                       console.log("NX="+this.NX) // this show successfully the value of the action movement NX
                                        this.NY=ev.center.y;
                                        console.log("NY="+this.NY) // this show successfully the value of the action movement NY
                                    }

                );

                ContentComponent.hammerInitialized = true;
            }

            else {
                console.log('hammer already initialised');
             }
console.log("NX="+this.NX); //here it shows me that NX is undefined
console.log("NY="+this.NY)  //undefined too

    }


}

Answer 1

通过不将 hammer 函数作为静态参数传递来工作

ngAfterViewInit() {
        /////////////////////////////////////////////////

            //reference à l'element svg

                var myElement = document.getElementById('idsimulation');
                var actionHammer = new Hammer(myElement);

            //action pan
                actionHammer.get('pan').set({direction:Hammer.DIRECTION_ALL});
                        //actionHammer.on("panleft panright panup pandown tap press",hammer);
                        //actionHammer.on('pan',hammer);


                actionHammer.on('pan',ev => {
                    //console.log(ev);
                    console.log("X=" + ev.center.x);
                    console.log("Y=" + ev.center.x);

                    this.ParamService.dormant.X0 = (ev.center.x) - 200; //170
                    this.ParamService.dormant.Y0 = (ev.center.y) - 190; //150


                    // myElement.setAttribute("x", ev.center.x+200);
                    // myElement.setAttribute("y", ev.center.y+270);
                    });
            //action pinch
                actionHammer.get('pinch').set({enable:true});
                actionHammer.on('pinch',ev =>{
                    console.log(ev);
                })


    }

Angular2：如何使用 hammer.js 制作可移动的 svg 对象？

Angular2 :How to make a movable svg object with hammer.js?

svg

typescript

angular

hammer.js