Question

我正在使用angular2应用程序，并且我使用hammer.js在我的组件视图中移动一个简单的矩形svg对象，我使用的方法包括使用＆＃34 ;泛行动＆＃34;锤子给了我每个替代陈词滥调的x和y位置，并且我将x和y影响到我的svg矩形的x和y属性，问题是这种做法甚至没有做到＃＆＃ 39;在控制台中看到动作的x和y的值，

任何想法将depalcement的值传递给svg元素postion ???

这是我的代码：

观点：

<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

通过不将锤子函数作为静态参数传递而起作用

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对象？

1 个答案: