标签: transform

我想检测,其中一个MouseEvent已经发生,在相对于点击的元素坐标.为什么？因为我想在点击的位置添加绝对定位的子元素.

我知道在没有CSS3转换时如何检测它(见下面的描述).但是,当我添加一个CSS3转换,然后我的算法中断,我不知道如何解决它.

我没有使用任何JavaScript库,我想了解简单JavaScript中的工作原理.所以,请不要回答"只使用jQuery".

顺便说一句,我想要一个适用于所有MouseEvents的解决方案,而不仅仅是"点击".并不重要,因为我相信所有鼠标事件都具有相同的属性,因此相同的解决方案应该适用于所有这些事件.

背景资料

根据DOM Level 2规范,a MouseEvent几乎没有与获取事件坐标相关的属性:

• screenX并screenY返回屏幕坐标(原点是用户监视器的左上角)
• clientX并clientY返回相对于文档视口的坐标.

因此,为了找到MouseEvent相对于被点击元素内容的位置,我必须做这个数学运算:

ev.clientX - this.getBoundingClientRect().left - this.clientLeft + this.scrollLeft

• ev.clientX 是相对于文档视口的坐标
• this.getBoundingClientRect().left 是元素相对于文档视口的位置
• this.clientLeft 是元素边界和内部坐标之间的边界(和滚动条)的数量
• this.scrollLeft 是元素内部的滚动量

getBoundingClientRect(),clientLeft并scrollLeft在CSSOM View Module中指定.

没有CSS变换的实验(它有效)

混乱？尝试以下JavaScript和HTML.点击后,红点应该出现在点击发生的确切位置.这个版本"非常简单",按预期工作.

function click_handler(ev) {
    var rect = this.getBoundingClientRect();
    var left = ev.clientX - rect.left - this.clientLeft + this.scrollLeft;
    var top = ev.clientY - …

我有一些IIS重写规则,我想根据环境而变化.开发重写规则在web.config文件中,然后在web.test.config文件的末尾我有:

    <appSettings>
         ...Some app settings tranforms here
    </appSettings>
    <system.webserver>
            <rewrite xdt:Transform="Replace">
              <rules>
                ... rules here
              </rules>
            </rewrite>
          </system.webserver>
        </configuration>

我部署到测试时,我的应用程序设置正在转换,但是IIS重写规则却没有.我希望整个<rewrite>部分可以简单地用转换文件中的部分替换(根据http://msdn.microsoft.com/en-us/library/dd465326.aspx),但没有任何改变.

我也尝试过xdt:Transform="Replace" xdt:Locator="Match(name)">遵守个别规则:

<rule name="Test rule" stopProcessing="true" xdt:Transform="Replace" xdt:Locator="Match(name)">

但这再次没有区别.

是否有可能替换web.config中的重写规则,如果是这样,我错过了什么？

以下样式只是如何在CSS3中设置转换的示例.
是否有一个纯粹的CSS技巧来循环播放？

div {
    width:100px;
    height:100px;
    background:red;
    transition:width 0.1s;
    -webkit-transition:width 0.1s; /* Safari and Chrome */
    -moz-transition:width 0.1s; /* Firefox 4 */
    -o-transition:width 0.1s; /* Opera */
    transition:width 0.1s; /* Opera */
}

div:hover {
    width:300px;
}

我遇到了编辑距离问题的这种变化:

设计一种将源字转换为目标字的算法.例如:从头到尾,在每一步中,你只需要替换一个字符,并且该字必须有效.你会得到一本字典.

它显然是编辑距离问题的变体,但在编辑距离中我不关心该单词是否有效.那么如何添加此要求来编辑距离.

例如,如果我们-vendor-transform: rotate(40deg)在矩形上设置一个 css属性<div>,所有突然拖动和调整大小都会变得非常奇怪和有缺陷.

这是一个简单的jQueryUI示例:http://jsfiddle.net/Ja4dY/1/

您会注意到,如果在转换时拖动或调整该矩形的大小,它将向上或向下跳跃,并且光标将不会保留在正确的位置.在我的真实代码中,我使用自定义代码来调整大小和拖动,但是我遇到了同样的问题.

当然,"问题"是元素的方向会发生变化.因此,左可右,上得底部和其间的东西和JavaScript代码仍然处理,因为它会在每个方向不会改变.

那么,问题是:我们如何补偿变换/旋转元素？

任何好的资源/书籍/博客也非常受欢迎.

我正在尝试使用XSLT将一些XML转换为HTML.

问题:

我无法让它发挥作用.有人能告诉我我做错了什么吗？

XML:

<ArrayOfBrokerage xmlns:i="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.test.com/">
    <Brokerage>
        <BrokerageID>91</BrokerageID>
        <LastYodleeUpdate>0001-01-01T00:00:00</LastYodleeUpdate>
        <Name>E*TRADE</Name>
        <Validation i:nil="true" />
        <Username>PersonalTradingTesting</Username>
    </Brokerage>
</ArrayOfBrokerage>

XSLT:

<xsl:stylesheet version="1.0" xmlns="http://www.test.com/" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xslFormatting="urn:xslFormatting">

    <xsl:output method="html" indent="no"/>

    <xsl:template match="/ArrayOfBrokerage">
        <xsl:for-each select="Brokerage">
            Test
       </xsl:for-each>
    </xsl:template>

</xsl:stylesheet>

我有两个对象列表; List<X>和List<Y>.X并且Y是看起来像的对象:

public class X {
    String a;
    String b;
    String v;
    String w;
    String m;
    String n;
}

public class Y {
    String a;
    String b;
    List<A> aList;
}
public class A {
    String v;
    String w;
    List<B> bList;
}
public class B {
    String m;
    String n;
}

如何转变List<X>成List<Y>基于一个规则:
有些字段的值必须相等.
例如:
在List<Y>,对于一个对象Y,字段a的值必须相等.
在Y的字段中List<A>,对于一个对象A,字段w的值必须相等.
在A的字段中List<B>,对于一个对象B,字段m的值必须相等,依此类推.

Guava有这个方法,Lists#transform,但我不知道如何转换.

还是其他任何方式？

我尝试使用style.transform属性,但我不能进行转换,没有那么多的文档,哭...

这是css3代码:

transform:translateZ(-100px)translateX(-24%)translateY(0)rotateY(60deg);

我有一个最初在Inkscape中创建的免费剪贴画SVG文件,我正在修改它以用于Windows 8 JavaScript游戏.它包含许多路径实例,并在周围的组上应用矩阵变换,如下所示:

<g transform="matrix(0.443,0.896,-0.896,0.443,589.739,-373.223)">
    <path d="M486,313s27-9,43-29l26,4,1,23-22,5s-25-6-48-3z" />
</g>

我希望通过将它预先应用到Inkscape中的路径来展平该转换,以减少动画期间的浏览器工作.然而,当我将6个矩阵值插入Inkscape中的ABCDEF参数并应用它时,它为路径提供了完全不同的旋转和缩放到IE10引擎的功能.

我已经多次检查过我正确映射了6个值.我究竟做错了什么？

编辑:好的,这里是IE10和Inkscape的截图之前和之后.对于IE10的情况,SVG直接驻留在一个空的HTML文档的主体内(Firefox中的渲染完全相同).在Inkscape中,我只是打开了"之前"SVG文件,该文件只包含路径元素,选择了路径,并将6个矩阵变换值插入到Object> Transform> Matrix中.我对矩阵知之甚少,我只是希望能够以与浏览器相同的方式预先应用这些转换,并且理想地理解为什么Inkscape存在差异.谢谢.

旋转是一种风格转换,在RN中,您可以像这样旋转

  render() {
    return (
      <View style={{transform:[{rotate: '10 deg'}]}}>
        <Image source={require('./logo.png')} />
      </View>
    );
  }

但是,要在RN中制作动画,必须使用数字,而不是字符串.您是否仍然可以在RN中进行变换动画,或者我是否需要提供某种精灵表并在某些fps中更改Image src？