如果这是在不正确的社区,我道歉,我找不到更合适的.
随着用户体验设计的推动,创建交互式图标,在状态之间平滑动画,我想知道在性能,兼容性和自定义方面是否有比基于SVG的图形更好的Web解决方案.
我有一个想法,使用样式化的HTML元素和CSS过渡重新创建一些这些图标.通过定义图标的起点和终点,我们可以自定义它的许多属性,例如颜色,圆度,过渡缓和和延迟,以使用单个代码库创建非常自定义的动画.由于它使用纯CSS属性而不是JavaScript来计算帧,因此它应该比SVG图形更有效地使用硬件.
查看我制作的示例,它提供了一个用户界面来更改每个部件的颜色,圆度,旋转和不透明度(用于调试).它显示各种尺寸的图标.
http://jsfiddle.net/evankennedy/v118voks/9/
基本上,在悬停时,我们将属性应用于每个单独的栏:
.menu:hover .bar-1 {
width: 0.5em;
left: 0;
top: 0.125em;
transform: rotate(-45deg);
}
我从这种方法中看到了一些缺点.
IE8和Opera Mini ......甚至IE9也没有进行转换,但它至少有转换所以它将是一个非动画图标.IE8可以用一些hacky过滤器修复,并确保使用宽度或相对定位而不是变换,但这会使代码膨胀一些.
HTML代码中会有额外的标记.我希望未来会出现一些解决方案(类似于Shadow DOM),这有助于缓解这一问题.一些图标可以纯粹用一个元素和伪元素制作,但我不想将所有图标限制为3个.
很难让所有图标在小尺寸上看起来很好.我不确定这与使用小尺寸的SVG图形相比如何,但我认为原生元素看起来会更糟,因为这不是它们的主要目的.我的例子中的图标确实看起来很好,但是在16px下.
这些缺点和我错过的任何其他缺点都超过积极因素吗？
我只是坐在工作的一些网页设计和思考"嘿,那岂不是很好,如果我们可以应用CSS媒体查询块元素(即div,section等)？"
说真的,如果我们能够拥有这个功能,我们可以制作一些非常令人惊叹的流畅布局.在这篇文章中,我将使用一个简单的社交插件,我可以将其实现到我的任何页面上的侧边栏中,这些页面可以基于它的父div大小而流畅.这很方便所以我可以调整我的小部件的大小,无论它是实现为500px列还是300px列,因此我不必为每个布局实现特定的样式表.
>=500px <500px
_______________________________ ____________________
| | | |
____________________ ______ ______
| | | | | |
| LIKE ON FACEBOOK | | ICON | | ICON |
|____________________| |______| |______|
____________________ ______ ____________________
| | | | | |
| FOLLOW ON TWITTER | | ICON | | LIKE ON FACEBOOK |
|____________________| |______| |____________________|
______
| |
| ICON |
|______|
____________________
| |
| FOLLOW ON TWITTER |
|____________________|
我正在尝试将两个画布混合到一个画布上,用于我正在创建的绘图应用程序.我非常了解Javascript,但我真的不知道从哪里开始使用WebGL,因为这不是一项非常艰巨的任务,我假设如果我不使用它会更快地处理速度另一个像Three.js这样的图书馆或其他类似的图书馆.
我已经拥有的是用户将要绘制的画布(让我们称之为画布A和B),这些画布都是隐藏的,而帆布C正在显示.
<canvas id='C' width=800 height=600></canvas>
<canvas id='A' width=800 height=600 style='display:none'></canvas>
<canvas id='B' width=800 height=600 style='display:none'></canvas>
我已经完成了主绘图应用程序,用户可以选择要绘制的图层并在其上绘制,但是我如何能够使用WebGL将两个图层混合在一起使用某种混合模式(即:乘法)作为用户是否继续使用WebGL编辑画布？
起初我尝试在这里关注其他帖子:https://stackoverflow.com/a/11596922/1572938但我感到困惑.
如果有人想填补我的jsfiddle上的空白,那么另一篇文章就会很好用!http://jsfiddle.net/W3fVV/1/
我正在设计一个在HTML5 Canvas元素上运行的Photoshop风格的Web应用程序.该程序运行良好,速度非常快,直到我将混合模式添加到等式中.我通过将每个画布元素合并为一个并使用从底部画布开始的右混合模式组合每个画布的每个像素来实现混合模式.
for (int i=0; i<width*height*4; i+=4) {
var base = [layer[0][i],layer[0][i+1],layer[0][i+2],layer[0][i+3]];
var nextLayerPixel = [layer[1][i],layer[1][i+1],layer[1][i+2],layer[1][i+3]];
//Apply first blend between first and second layer
basePixel = blend(base,nextLayerPixel);
for(int j=0;j+1 != layer.length;j++){
//Apply subsequent blends here to basePixel
nextLayerPixel = [layer[j+1][i],layer[j+1][i+1],layer[j+1][i+2],layer[j+1][i+3]];
basePixel = blend(basePixel,nextLayerPixel);
}
pixels[i] = base[0];
pixels[i+1] = base[1];
pixels[i+2] = base[2];
pixels[i+3] = base[3];
}
canvas.getContext('2d').putImageData(imgData,x,y);
随着它调用混合不同的混合模式.我的"普通"混合模式如下:
var blend = function(base,blend) {
var fgAlpha = blend[3]/255;
var bgAlpha = (1-blend[3]/255)*base[3]/255;
blend[0] = (blend[0]*fgAlpha+base[0]*bgAlpha);
blend[1] = (blend[1]*fgAlpha+base[1]*bgAlpha);
blend[2] = …我正在开发一个依赖于 OpenGL ES 2.0 的图像处理程序，因此它可以部署在多种设备上。在许多情况下，人们会使用小图像，这不会绕过纹理限制，但对于每个方向都有数千像素的较大图像，它可能无法在多个设备上渲染。
我的第一个想法是将图像分割成更小的方块并单独渲染每个方块，这适用于简单的程序，但对于需要基于相邻像素值（例如卷积或扭曲效果）进行渲染的任务，这还不够。
Photoshop 如何通过在其应用程序中添加 OpenGL 支持来实现许多效果，从而保持其 300,000 x 300,000 尺寸功能？
对大于 GL_MAX_TEXTURE_SIZE 的图像执行后处理任务的最有效方法是什么？
在发送图像进行处理之前仅渲染到可视区域并重新缩放图像以进行缩放？但这需要我重新处理图像以进行简单的放大/缩小和平移图像。我发现这种方法的唯一问题是无法将图像导出为全质量图像，因此这种方法在用户尝试保存其工作之前一直有效。
我想知道inline当一个函数作为一个函数传递时,C++是否仍然会遵守该关键字.在下面的示例中,是否会在循环中调用onFrame每次推送到堆栈的新帧？frame()while
bool interrupt = false;
void run(std::function<void()> frame) {
while(!interrupt) frame();
}
inline void onFrame() {
// do something each frame
}
int main() {
run(onFrame);
}
或者改变这个有什么影响？
void run(std::function<inline void()> frame) {
while(!interrupt) frame();
}
如果你没有明确的答案,你能帮我找到一种测试方法吗？可能使用内存地址或某种调试器？
我正在尝试为在canvas上下文中调用的每个方法添加一些代码.我试图这样做,所以我可以将每个命令添加到一个命令数组.这是我认为有效的代码(但不是):
var canvas = Object.getPrototypeOf(document.createElement('canvas').getContext('2d'));
for(p in canvas){
if(canvas.hasOwnProperty(p)){
var original = canvas[p];
canvas[p] = function(){
//extra code to be run
return original.apply(this,arguments);
}
}
}
在我看来,这似乎应该有效,但事实并非如此.如果我在一个例子中使用这个代码,我会得到一个NOT_SUPPORTED_ERR: DOM Exception 9