小编Nig*_*ige的帖子

我只是有一个关于构造和处理服务中的http请求的响应的问题.我正在使用Angular2.alpha46 Typescript(刚开始测试它 - 我喜欢... Ps ..感谢所有一直在研究并通过github贡献的人们)

所以请注意以下几点:

登录-form.component.ts

import {Component, CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/angular2';
import {UserService} from '../../shared/service/user.service';
import {Router} from 'angular2/router';
import {User} from '../../model/user.model';
import {APP_ROUTES, Routes} from '../../core/route.config';

@Component({
    selector: 'login-form',
    templateUrl: 'app/login/components/login-form.component.html',
    directives: [CORE_DIRECTIVES, FORM_DIRECTIVES]
})

export class LoginFormComponent {
    user: User;
    submitted: Boolean = false;

    constructor(private userService:UserService, private router: Router) {
        this.user = new User();
    }

    onLogin() {
        this.submitted = true;

        this.userService.login(this.user,
            () => this.router.navigate([Routes.home.as]))
    }
}

从这个组件我导入我的userService,它将容纳我的http请求登录用户服务看起来像这样:

user.service.ts

import {Inject} from 'angular2/angular2'; …

我正在努力找出并确定如何根据此示例放大我的鼠标位置。（https://stackblitz.com/edit/js-fxnmkm?file=index.js）

let node,
    scale = 1,
    posX = 0,
    posY = 0,
    node = document.querySelector('.frame');

const render = () => {
  window.requestAnimationFrame(() => {
    let val = `translate3D(${posX}px, ${posY}px, 0px) scale(${scale})`
    node.style.transform = val
  })
}

window.addEventListener('wheel', (e) => {
  e.preventDefault();

  // Zooming happens here
  if (e.ctrlKey) {
    scale -= e.deltaY * 0.01;
  } else {
    posX -= e.deltaX * 2;
    posY -= e.deltaY * 2;
  }

  render();
});

我想要的效果是基于这个例子（https://codepen.io/techslides/pen/zowLd?editors=0010）放大时。目前我上面的例子只缩放到“视口”的中心，但我希望它是我的光标当前所在的位置。

我已经在高低搜索了一个不是通过画布实现的解决方案。任何帮助，将不胜感激！

警告我使用滚轮事件的原因是为了模仿 Figma（设计工具）平移和缩放的交互。