我正在尝试使用多个滑块创建用户界面。这些滑块应具有不同的角度,同时也可以与多个手指一起使用。
当我使用聚合物<paper-slider>
元素时,它甚至可以用于多个用户输入。但是一旦我使用style="transform: rotate(-90deg);"
它就不再可用了。虽然我想垂直移动,但我必须水平拖动。
所以我决定创建一个自定义元素。是否有可能获得鼠标相对于div的x和y位置(特别是旋转时)?
我从鼠标位置了解this.getBoundingClientRect()
,但这只适用于我的元素未嵌套在其他聚合物元素内并且元素未旋转的情况。
有什么想法可以解决这个问题吗? 如果我可以在我的控制范围内解决这个问题,无论外面采用什么样的旋转方式,都会很棒。
示例:
paper-slider{
margin-top: 100px;
transform: rotate(-90deg);
}
<script src="https://raw-dot-custom-elements.appspot.com/PolymerElements/paper-slider/v2.0.2/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="https://raw-dot-custom-elements.appspot.com/PolymerElements/paper-slider/v2.0.2/paper-slider/paper-slider.html">
<paper-slider></paper-slider>