我的部分应用包括歌曲的音量自动化.
卷自动化按以下格式描述:
[[0,50],[20,62],[48,92]]
Run Code Online (Sandbox Code Playgroud)
我认为这个数组中的每个项目都是一个'数据点',第一个值包含歌曲中的位置,第二个值包含0-100的音量.
然后,我获取这些值并执行客户端功能,以"虚拟"数据点插入此数据,以创建贝塞尔曲线,从而在播放音频文件时允许平滑的音量转换.
但是,需要允许用户将该自动化保存到数据库中以便以后调用.
数据点可以是无限的(虽然实际上绝不应该超过40-50左右,大多数都不到10)
我该如何处理数据呢?它应该按原样存储在文本字段中吗?或者我应该事先以某种方式处理它以获得最佳效果?
在MySQL中最好使用哪种数据类型来存储数组?
使用css时flexbox,三个主要浏览器在某些区域的行为似乎完全不同.
在这种情况下,我试图创建一个图像网格:
<div class="container">
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
</div>
.container {
display:inline-flex;
flex-flow : column wrap;
align-content : flex-start;
height : 100%;
}
Run Code Online (Sandbox Code Playgroud)
在这个例子中,我需要一个容器,它本身包含几个div元素,设置为从顶部到底部流动,并在它们到达底部时包裹.最终为我提供了一系列照片.
但是,我需要容器水平扩展以容纳包装元素:
这是一个快速的jsFiddle来演示.
行为如下:
在这个例子中,我想在其他两个浏览器中实现IE11的行为.因此我的问题是,如何使flexbox容器水平扩展以匹配其column wrap内容.
提前致谢.
这是如何在使用我自己的鼠标滚轮smoothscroll时缩放到鼠标指针的后续问题?
我正在使用css变换将图像缩放到鼠标指针.我也使用自己的平滑滚动算法来插值并为鼠标滚轮提供动量.
随着Bali Balo在我之前的问题中的帮助,我已经成功地获得了90%的收益.
您现在可以将图像一直放大到鼠标指针,同时仍然具有平滑滚动,如下面的JSFiddle所示:
但是,移动鼠标指针时功能会中断.
为了进一步说明,如果我放大鼠标滚轮上的一个凹口,图像会缩放到正确的位置.对于我在鼠标滚轮上放大的每个凹口,此行为都会继续,完全按照预期进行.但是,如果在部分缩放后,我将鼠标移动到其他位置,功能会中断,我必须完全缩小才能更改缩放位置.
预期的行为是缩放过程中鼠标位置的任何变化都可以在缩放图像中正确反映.
控制当前行为的两个主要功能如下:
self.container.on('mousewheel', function (e, delta) {
var offset = self.image.offset();
self.mouseLocation.x = (e.pageX - offset.left) / self.currentscale;
self.mouseLocation.y = (e.pageY - offset.top) / self.currentscale;
if (!self.running) {
self.running = true;
self.animateLoop();
}
self.delta = delta
self.smoothWheel(delta);
return false;
});
Run Code Online (Sandbox Code Playgroud)
此功能收集鼠标在缩放图像的当前比例下的当前位置.
然后它开始我的平滑滚动算法,导致为每个插值调用下一个函数:
zoom: function (scale) {
var self = this;
self.currentLocation.x += ((self.mouseLocation.x - self.currentLocation.x) / self.currentscale);
self.currentLocation.y += ((self.mouseLocation.y - self.currentLocation.y) / self.currentscale);
var compat = ['-moz-', '-webkit-', …Run Code Online (Sandbox Code Playgroud) 我的应用程序的一部分包括使用标准的2d上下文画布和webGL的混合的html5照片编辑.
无论如何,当用户操纵他们的照片时,我正在保存"撤消"状态.这些都作为base64图像数据存储在Javascript对象中.
一切都很好,性能也很好.
但是我想知道从getImageData存储数据是否会占用更少的内存或提供更好的性能?
总结一下我的问题是:
这需要更多的内存空间,toDataURL()生成的base64 jpeg或getImageData()的结果?两者之间是否有任何性能差异(关于加载到画布上,以及从画布中提取数据)
提前致谢.
我有一个现有的PHP应用程序,我需要添加实时通知.为了实现这一点,我安装了node.js(打算为所有实时功能添加socket.io)
然而.尽管花了最后三个小时进行研究并试图了解如何整合这两者,但我发现自己没有接近获得理解.
我目前正在使用以下内容:
我已经编写了代码,它将一个事件从客户端发送到PHP并将通知插入到数据库中.当收件人刷新他们的页面时,他们当然会看到通知.我只需要node.js来处理推送到客户端的实时时间,但我不知道如何设置它.
鉴于这种情况,我真正需要知道的是:
最后,我希望能够运行PHP函数并期望node.js/socket.io/websockets将通知推送到客户端.我根本不知道如何到达那里.
提前感谢任何示例/信息/指南.
正如标题所说,如果我使用以下方法从DOM中删除脚本标记:
$('#scriptid').remove();
Run Code Online (Sandbox Code Playgroud)
javascript本身是保留在内存中还是已清除?
或者......我是否完全误解了浏览器对待javascript的方式?这很可能.
对于那些对我的询问有兴趣的人,请看下面:
我正在将一些常见的javascript交互从静态脚本文件转移到PHP中动态生成的交互.当用户需要时按需加载.
这样做的原因是为了移动逻辑服务器端并运行从服务器clientide返回的小脚本.客户端不是拥有包含大量逻辑的大型脚本.
这与facebook的做法类似......
如果我们举一个简单的对话框.而不是在javascript中生成html,将其附加到dom,然后使用jqueryUI的对话框小部件加载它,我现在正在执行以下操作.
<body>一旦被渲染,就会附加到,然后javascript也会附加到DOM中.插入后会自动执行javascript,并打开动态对话框.
这样做大大减少了我页面上javasript的数量,但是我担心清理插入的javascript.
显然,一旦对话框关闭,它将使用jQuery从DOM中删除:
$('#dialog').remove();
javascript附加了一个ID,我也通过相同的方法从DOM中删除它.
但是,如上所述,使用jQuery的.remove()实际上是从内存中清除javascript还是简单地<script>从DOM中删除元素?
如果是这样,有什么方法可以清理它吗?
我正在使用WebGL(使用2d画布后备照片编辑器).
我决定将旋转直接合并到裁剪工具中,其方式类似于iOS 8照片裁剪器.即,在旋转照片时,照片的大小和位置会动态变化,以便裁剪区域始终包含在照片本身中.
但是,我正在努力学习一些数学知识.
我有两个矩形,照片和裁剪区域.
两者都定义为:
var rect = {
x : x,
y : y,
w : width,
h : height
}
Run Code Online (Sandbox Code Playgroud)
定义照片本身的矩形也具有rotation弧度属性,当然也描述了照片的角度(以弧度表示).
应该注意的是,照片矩形(而不是裁剪矩形)的坐标x和y坐标实际上定义了照片的中心,而不是左上角的点.虽然这看起来很奇怪,但它使我们在其他地方的计算更容易,并且不应该影响这个问题.为了完整起见,我提到它.
照片的变换原点始终设置为croparea 的中心.
当照片的角度0和裁剪区域与照片的大小相同时,矩形对齐如下:

当我旋转照片时,比例因子应用于照片矩形以确保croparea保持在照片边界内:

这是通过计算croparea的边界框来实现的,并从中计算出应用于photo矩形的所需比例因子:
TC.UI.PhotoCropper.prototype._GetBoundingBox = function(w,h,rads){
var c = Math.abs(Math.cos(rads));
var s = Math.abs(Math.sin(rads));
return({ w: h * s + w * c, h: h * c + w * s });
}
var bbox = this._GetBoundingBox(crop.w, …Run Code Online (Sandbox Code Playgroud) 我已经做了很多寻找这个问题的解决方案,但到目前为止还没有找到一个跨浏览器的工具.
我需要的是一个原始的javascript函数,它将获取一个元素并在innerHTML成功插入dom后运行回调.
例如
var element = document.getElementById('example');
element.innerHTML = newhtml;
waitUntilReady(element, function(){
//do stuff here...
});
Run Code Online (Sandbox Code Playgroud)
总而言之,我需要能够检查元素的内容并在innerHTML完成时触发回调.
在此先感谢您的帮助.
我一直在开发专门针对现代浏览器的应用程序,并且已经非常大量地使用了box-shadow属性.
直到最近,这对所有支持的浏览器都是绝对正常的.然而大约一个月前,当我在Chrome中测试时,我注意到滚动"非常"缓慢,几乎无法使用.
在过去的一个月里,我尝试了删除脚本/弄乱我的html结构,你能想到的一切,直到今天我找到了原因.
如果在我设置的所有元素上禁用了box-shadow/webkit-box-shadow,问题就会消失.
令我感到奇怪的是,它在Chrome中运行良好,直到一个月前.顺便说一句,在Windows版本的safari上滚动很好,尽管比IE/Opera和Firefox慢一点.
这是一个已知的问题吗?有人有解决方法吗?
最重要的是,是否存在另一种在不使用CSS3属性的情况下复制相同效果的方法?
我正在向服务器发送SVG文件的字符串表示,并使用Imagick以下列方式将其转换为jpeg:
$image = stripslashes($_POST['json']);
$filename = $_POST['filename'];
$unique = time();
$im = new Imagick();
$im->readImageBlob($image);
$im->setImageFormat("jpeg");
$im->writeImage('../photos/' . $type . '/humourised_' . $unique . $filename);
$im->clear();
$im->destroy();
Run Code Online (Sandbox Code Playgroud)
但是,我希望在光栅化之前调整SVG的大小,以使得生成的图像大于SVG文件中指定的尺寸.
我将我的代码修改为以下内容:
$image = stripslashes($_POST['json']);
$filename = $_POST['filename'];
$unique = time();
$im = new Imagick();
$im->readImageBlob($image);
$res = $im->getImageResolution();
$x_ratio = $res['x'] / $im->getImageWidth();
$y_ratio = $res['y'] / $im->getImageHeight();
$im->removeImage();
$im->setResolution($width_in_pixels * $x_ratio, $height_in_pixels * $y_ratio);
$im->readImageBlob($image);
$im->setImageFormat("jpeg");
$im->writeImage('../photos/' . $type . '/humourised_' . $unique . $filename);
$im->clear();
$im->destroy();
Run Code Online (Sandbox Code Playgroud)
此代码应解决分辨率并相应地调整SVG的大小.如果SVG画布及其元素具有基于"百分比"的宽度,则它可以完美地工作,但是它似乎不适用于"px"中定义的元素.不幸的是,这是一项要求.
将发送到服务器的典型SVG字符串如下所示:
<?xml version="1.0" …Run Code Online (Sandbox Code Playgroud)