小编mat*_*ler的帖子

用于三线性插值的Javascript函数

所有,

想一想,我正在寻找一个三线性插值功能.

这是详细信息:

我有一个三维数据集:

  • 尺寸1从0到100变化,增量为5
  • 尺寸2从0到100变化,增量为5
  • 尺寸3从0到1变化,增量为0.1

所以,我有4851个总值(21 x 21 x 11).

如果我需要找到(10,25,0.3)的值 - 这很容易 - 我可以在三维数组中查找它.

但是,我需要能够提出最佳近似值,例如,给定(17,48,0.73)的维度值.

所以,我认为我正在寻找的是三线性插值(尽管我非常感谢任何有关更好方法的建议,或者暗示我完全是错误的话题......)

快速谷歌搜索出现了这个公式:

Vxyz = 
V000(1-x)(1-y)(1-z) +
V100x(1-y)(1-z) +
V010(1-x)y(1-z) +
V001(1-x)(1-y)z +
V101x(1-y)z +
V011(1-x)yz +
V110xy(1-z) +
V111xyz 
Run Code Online (Sandbox Code Playgroud)

这看起来像我正在寻找的,但我不确定x,y和z代表什么.如果我不得不猜测,x是一个比率 - 我的"目标"第一个维度值与我最近的两个值之间的距离,y是第二个维度的比率,z是第三个维度的比率.

当然,因为我真的不知道我在说什么,所以我不知道这是对还是错.

所以,理想情况下,我想要一些Javascript或伪代码,以确切地说明如何实现这一目标.

提前谢谢了!

javascript algorithm interpolation

6
推荐指数
1
解决办法
3214
查看次数

iOS5(Safari)的一个错误,"位置:固定"div和高大的形式

所有,

我正在开发一个包含非常"高"形式的Web应用程序.(高,这意味着它比典型的屏幕高几百%).

无论用户在表单中的位置如何,该设计都需要一个固定在屏幕底部的"页脚",它始终可见.

换句话说,无论用户是在靠近表单的顶部,中间还是底部,页脚都应该是可见的,并且表单应该在其下面滚动.

为了实现这一点,我创建了一个div作为div position:fixed,和bottom:0.

这适用于我测试过的所有浏览器,包括iOS5上的Safari.

除了有一个 bug ...

如果用户位于表单顶部附近,并将焦点放在其中一个文本字段上 - 正如预期的那样,iOS会显示键盘.

每次用户单击" 下一步"按钮时,iOS"选中"她到下一个字段.

当她通过反复单击" 下一步 " 向下进入表单时,iOS会自动"向上滚动"表单,因此她在表单上的位置仍然在视图中.

但是,iOS似乎没有更新position:fixed页脚div 的位置- 它与表单的其余部分一起错误地向上滚动.

如果用户解除键盘,div将恢复到"正确"的位置,因此这不是一个不可恢复的错误.但是,页脚移动的事实是一个明显的问题.

这是iOS实现的错误还是缺点position:fixed?或者,有什么我做错了吗?

提前谢谢了!

[UPDATE]

Remy Sharp(恰当地命名)刚刚position:fixed在iOS/Safari上撰写了一篇关于各种错误和问题的精彩而详细的帖子:http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling -on-ios /.如果您正在考虑position:fixed在针对iOS用户的网站上使用,那么这是必读的...

html css css-position ios5

6
推荐指数
1
解决办法
5283
查看次数

CSS3动画和过渡 - 浏览器在动画图形背景或DOM元素方面更好吗?

我正在开发一个网络应用程序; 其中一个设计要求是几个大型CSS3动画.

具体来说 - 它有一个大的<div>,将响应用户输入在屏幕上转换.

由于应用程序的设计方式,其"内容" <div>可以实现为设置为<div>背景的大型静态图形(例如,.jpg或.png).

或者,内容也可以使用标准HTML实现.(内容布局本身是一个"小"的棘手 - 它需要几个浮动或定位的嵌套div元素和跨度,但没有什么疯狂.)

我的问题是 - 哪个选项可能会产生最好(最流畅)的动画?

(我显然可以自己测试一下,但通常很难判断动画的流畅程度,尤其是在各种设备上的十几种不同浏览器中.我也意识到还有其他考虑因素 - 例如维护.但在这种情况下,我完全专注于动画表演.)

我想知道,如果浏览器一般都是在动画/渲染简单的DOM元素更好地图形背景,或更复杂的DOM元素(有很多儿童)图形元素?

还 - 有其他指导方针吗?例如,

  • 浏览器是否比其他浏览器更好地激活某些类型的图形元素?(例如.png vs .jpg)
  • 浏览器在子元素具有position:absolute,子元素浮动时,或子元素的位置由常规文档流确定时,是否更好地为元素设置动画?
  • 对嵌套元素执行不透明度,阴影或3D变换等操作会对父元素的动画产生负面影响吗?
  • 动画性能是否会因元素的复杂性而降低?例如,具有十几级嵌套DOM元素动画的元素是否比仅具有文本节点的简单元素更不平滑?

我对这些事情有直觉(深层嵌套的DOM元素会比简单元素更不容易制作动画),但我的直觉常常是错误的.所以,我想知道是否有关于浏览器或多或少有用的"规则".

当具有大量子元素的大元素被动画化时,我还应该考虑什么呢?

html5 css3 css-transitions

5
推荐指数
1
解决办法
397
查看次数

SVG:在 textPath 末尾右对齐文本

我想在 textPath 的末尾右对齐文本:

<svg height="300" width="400">
    <defs>
        <path id="myTextPath" d="M30,160  A175,175 0 0,1 370,160" />
    </defs>
    <path d="M30,160  A175,175 0 0,1 370,160" style="stroke: black; stroke-width:1; fill:none;" />
    <g fill="black" stroke="none">
        <text x="0%" y="0" text-anchor="start">
            <textPath xlink:href="#myTextPath">Start</textPath>
        </text>
        <text x="50%" y="0" text-anchor="middle">
            <textPath xlink:href="#myTextPath">Middle</textPath>
        </text>
        <text x="100%" y="0" text-anchor="end">
            <textPath xlink:href="#myTextPath">End</textPath>
        </text>
    </g>
</svg>
Run Code Online (Sandbox Code Playgroud)

你可以在这里看到这个工作:http : //jsfiddle.net/7sqdxw11/

开始,我会期望文本开始正确的-在textPath的开始。

但是,结尾文本的结尾远远低于 textPath 的结尾。

中间也很害羞的 textPath 的中间)。

这是一个屏幕截图:

在此处输入图片说明

我究竟做错了什么?如何让End在 textPath 弧的右端结束?

html svg

5
推荐指数
1
解决办法
679
查看次数

是否可以使用CSS为DOM元素设置SVG背景动画?

我使用SMIL为SVG图像设置动画,然后将该图像用作DOM元素的背景(例如,a button).

例如,此SVG图像(http://mattstuehler.com/spinner.svg)

<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
  <g fill="none"  stroke="#1e81cc" stroke-width="4">
    <circle cx="50%" cy="50%" r="18" stroke-opacity="0.3"/>
    <path d="M20,2 A18,18 0 0,1 38,20">
      <animateTransform attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="1s" repeatCount="indefinite"/>
    </path>
  </g>
</svg>
Run Code Online (Sandbox Code Playgroud)

但是,现在SMIL已被弃用,你如何只用CSS做到这一点?

提前致谢!

button {
  width: 200px;
  height: 60px;
  background-color: #eee;
  background-image: url(http://mattstuehler.com/spinner.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50px 50px;
  border: none;
  -webkit-appearance: none;
}
Run Code Online (Sandbox Code Playgroud)
<button>Hello</button>
Run Code Online (Sandbox Code Playgroud)

html javascript css svg

5
推荐指数
1
解决办法
2699
查看次数

在使用ng-packagr创建的角度4组件库中使用外部javaScript库

在Nikolas LeBlanc的这篇优秀文章的帮助下,我正在尝试创建一个Angular 4组件库:

https://medium.com/@nikolasleblanc/building-an-angular-4-component-library-with-the-angular-cli-and-ng-packagr-53b2ade0701e

问题是这个...我的库依赖于外部JavaScript文件 - 让我们调用它somefunctions.js.

在常规的Angular 4应用程序中 - 我已经能够通过引用文件中的angular-cli.json文件来完成此操作:

  "scripts": [
      "./app/js/somefunctions.js"
  ],
Run Code Online (Sandbox Code Playgroud)

...然后声明变量类型anytypings.d.ts的文件.

这使得JavaScript文件可供应用程序使用,并且它可以正常工作.

但是 - 我的目标是创建一个Angular 4组件库,并将其打包/发布到npm.

当我按照创建库的说明进行操作时 - 功能模块没有打包somefunctions.js.

所以 - 如果其他人安装我的模块,他们将不会somefunctions.js,并且它显然不会工作.

所以,我想我需要知道如何告诉ng-packagr捆绑模块,使其包含somefunctions.js,以及如何设置我的模块,以便我的代码可以在其他应用程序中安装模块时引用该文件.

提前致谢!

javascript angular ng-packagr

5
推荐指数
0
解决办法
277
查看次数

在 CSS 中创建带有右对齐标签和左对齐值的两列布局

全部,

在 HTML 和 CSS 中创建如下所示的简单布局的最简单方法是什么:

在此处输入图片说明

具体来说 - 左侧是右对齐标签,右侧是左对齐值。

我不想对左列的宽度进行硬编码 - 这应该根据最长标签的宽度来确定。

我正在寻找一种至少具有合理语义的方法,适用于屏幕阅读器(例如,屏幕阅读器应该读取标签,然后读取值,而不是所有标签,然后是所有值),并且不需要一大堆额外的<div>元素。

这似乎是一个相当常见的布局,所以我假设有一种非常简单的方法来做到这一点。但我自己还没有弄清楚。

A<table>可以完美工作,但正如每个人都提醒我的那样,永远不要使用<table>just 进行布局。这显然不是表格数据。

提前致谢!

html css

5
推荐指数
2
解决办法
2677
查看次数

@ font-face无法在Chrome for Android上运行

我正在尝试在移动网络应用程序中使用@ font-face,而且它不适用于Android版Chrome.

IS工作在以下方面:

  • iOS上的Safari
  • 默认Android浏览器
  • OSX上的Safari
  • Chrome上的Windows
  • Windows上的Firefox
  • Windows上的IE11

这是我正在使用的代码:

@font-face {
    font-family: 'liat';
    src: url('../fonts/liat_3.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
Run Code Online (Sandbox Code Playgroud)

我正在使用远程调试(https://developers.google.com/chrome-developer-tools/docs/remote-debugging)对其进行调试,但似乎没有任何错误.

这是我真的不明白的部分......

如果我转到开发者工具中的"网络"标签 - Chrome似乎没有尝试下载字体(即,没有网络调用来加载字体)

与我在桌面上的Chrome(Windows和OSX)中看到的相比,您可以看到加载的字体:

在此输入图像描述

另外 - 如果我转到资源选项卡 - 它不显示任何字体.

将其与我在桌面版Chrome中看到的内容进行比较:

在此输入图像描述

底线 - 桌面上的Chrome(以及iOS上的移动版Safari) - 加载并显示网络字体.但是,在Android上的Chrome上 - 网络字体甚至没有加载,更不用说了.

非常感谢任何帮助或建议!

css android google-chrome webfonts

4
推荐指数
1
解决办法
4410
查看次数

Flash AS3:如何在mouse_over子精灵时阻止MouseEvent.MOUSE_OUT

所有,

这是我的情况......

我的Flash应用程序的UI是一个网格.网格的每一行都是一个精灵,它包含许多响应鼠标事件的子精灵(UI控件)

网格的每一行都应该具有悬停效果 - 即,当您将鼠标悬停在该行上时,该行的背景应该会改变颜色.

这很容易实现:

rowSprite.addEventListener(MouseEvent.MOUSE_OVER, highlightRow, false, 0, true);
rowSprite.addEventListener(MouseEvent.MOUSE_OUT, unhighlightRow, false, 0, true);
Run Code Online (Sandbox Code Playgroud)

这样可以正常工作,除了当用户滚动任何行的子精灵时,行的MOUSE_OUT事件被触发,行被"取消突出显示".这不是我想要的.

换句话说-我喜欢行要不再高亮度显示,只有当你滚OUTSIDE行的,而不是当你翻转行中的某个孩子的精灵.

一个可能的解决方案:在unhighlightRow函数中,测试用户的鼠标位置是否仍然在行sprite边界内.但我猜这不是最优雅或最有效的解决方案.

这一定是一个非常普遍的问题.什么是最好的解决方案?

提前致谢!

flash actionscript-3

3
推荐指数
1
解决办法
5844
查看次数

Flash AS3 RIA开发的更好实践 - 使用事件/监听器,或允许孩子在父母中调用函数?

我正在开发一个内置在Flash AS3中的Web应用程序.

在高级别 - 应用程序有一个主屏幕,并弹出几个"模态对话框"类型的屏幕来管理各种用户交互.

(这是我在我开发的大多数应用程序中使用的类似模式...)

通常 - 当用户点击对话框屏幕上的UI控件(例如,按钮,文本框,滑动条等)时 - 主屏幕需要做出反应或管理后果.

似乎有两种一般方法可以解决这个问题:

  1. 有主屏幕监听的对话框屏幕调度事件
  2. 单击这些控件时,允许对话框屏幕调用主屏幕中的功能(这要求对话框屏幕保持对主屏幕的引用,并且主屏幕中的功能是公共的)

一般来说 - 我理解第一种方法的一个主要好处是对话框屏幕没有那么紧密耦合; 它的唯一责任是播放活动.这将允许我更容易地在其他上下文或应用程序中使用对话框类.

但是对于我开发的许多RIA--一个特定的屏幕对应用程序来说是特定的,我不可能在其他应用程序中重复使用它.因此,"易于重复使用"的好处是微乎其微的.

那么 - 如果你消除了这种好处 - 哪种方法实际上更好?(性能更高,资源消耗更少?)

例如 - 如果我使用事件,那么Flash需要为可能永远不会发生的事件管理许多侦听器.因此 - 如果对话窗口可以直接调用主屏幕中的函数,而不是调度事件,则可能更有效.

哪种方法更好?每种方法还有哪些其他好处/优点/缺点?

提前谢谢了.

apache-flex flash actionscript-3

3
推荐指数
1
解决办法
532
查看次数