标签: rendering

简单的HTML布局引擎,可将HTML转换为图像

我需要一个工具来自动将简单的HTML转换为图像.我将控制HTML输入,它将包含简单的文本格式标签和可能的图像链接 - 我不需要能够呈现任意HTML.有一个简单的方法吗?

我看过像Gecko和Webkit这样的HTML布局引擎,但坦率地说,我对它们拥有的选项数量感到不知所措 - 我不需要一个完整的Web浏览器!是否可以这种方式使用这些引擎?有人能引导我朝着正确的方向前进吗?

浏览器等其他可能性依赖于真实浏览器的屏幕截图,但我将在具有潜在许多用户的Web服务器上运行此应用程序,因此性能非常重要,我担心这种解决方案无法扩展.

想法?

编辑:抱歉忘记提到我的服务器正在运行Linux,因此Windows解决方案无济于事.:)

html layout rendering image image-processing

17
推荐指数
3
解决办法
2万
查看次数

什么是Java2d更快的替代品?

我正在寻找一些物理模拟,我需要在Java中快速渲染.

我过去遇到过Java2d的性能问题,那么快速的选择是什么?JOGL明显比Java2d快吗?

java performance rendering java-2d jogl

17
推荐指数
2
解决办法
6953
查看次数

为什么不同浏览器以不同方式呈现相同的HTML?

这是一个html页面:

<html>
<head>
<title>
Frame Set
</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<link rel="stylesheet" href="frame.css" type="text/css" media="screen" />

<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
    var winSize = $(window).width();
    var margin = (winSize-1000)/2;;
    $('#main').css({'margin-left':margin,'margin-right':margin});  
    }
)
$(function() {
  $(".frame").each(function() {
     var width = ($(this).find('.h').width()), 
         height = $(this).find('.l').height(),
         pad = $(this).find('.h').position().left,
         actWidth = width + 10,
         nHeight = height - (height * 2),
         rLeftMargin = actWidth - 1,
         bWidth = actWidth;

    $(this).find('.r').css({'margin-top':nHeight, 'margin-left':rLeftMargin, 'height':height});
    $(this).find('.h').css({'height':25});
    $(this).find('.b').css({'width':bWidth, 'margin-top':0});
  });
});
</script>
</head>
<body>
<div id="main" align="center" …
Run Code Online (Sandbox Code Playgroud)

html jquery rendering mozilla internet-explorer-8

17
推荐指数
4
解决办法
6257
查看次数

如何创建iPhone应用程序的简单音乐可视化工具?

我想为iPhone制作一个简单的鼓机应用程序.

现在我正在为它设计archichecture.经过一些研究后,我决定坚持使用Apple的音频单元托管指南中描述的方法制作播放系统,这些技术也在音频混音器样本中展示,它们的复杂性非常适合我目前的工程知识.(Mixig C++和Objective-C代码并使用OpenAl看起来很可怕)

但我一直在搞清楚,我将如何制作一个简单的音乐可视化工具,我打算做标准的频谱可视化工具,显示表示不同频率成分强度的垂直条.

  1. 我无法决定用什么来分析原始声音数据,我将提供给声音I/O模块,是否有任何Objective-C框架?

  2. 另外我不知道使用什么类型的图形渲染?可以使用Core Graphics制作简单的可视化工具,还是仅仅是OpenGL的工作?我想每秒实现大约30次更新,以使其看起来流畅?

你能帮助我吗?

iphone audio rendering objective-c

17
推荐指数
1
解决办法
9150
查看次数

如何在单位立方体世界中进行面部移除?

重要提示:这个问题不是关于几何剔除(截头剔除,背面剔除,遮挡剔除或任何朋友).这个问题是关于在设置时消除几何,早在我们进行剔除和渲染之前.

在一个单位立方体渲染的世界(一个 MineCraft)中,我试图找到如何从我的几何面列表中删除无法从任何角度看到的几何面的算法,无论相机在哪里.

例如,想象2个方块:

+----+      +----+
|    |      |    |
|    |      |    |
+----+      +----+
Run Code Online (Sandbox Code Playgroud)

显然有8个可见的边(每个方格4个.)现在我将方块移动到一起,相对于:

+----+----+
|         |
|         |
+----+----+
Run Code Online (Sandbox Code Playgroud)

而不是有8个方面,现在我只有6个!无论相机放置在何处,也无法看到它所面对的角度,无法看到中间触摸的两个.(方块的纹理不同,所以我们不能称它为4边.)

(同样的东西在3D中使用立方体,但是12个面(每个立方体6个)变为10个,因为2个触摸被消除了.)

我的问题是:有哪些算法可以帮助我识别这些隐藏的面孔?(我很高兴自己做谷歌搜索,但我甚至不知道这叫什么!)特别是,我正在寻找能够处理中间点的空洞点的东西,如果你是但是,因为它们被几何体包围,你无法看到它们.

例如:

+----+----+----+----+
|                   |
|                   |
+    +----+         +
|    |    |         |
|    | A  |         |
+    +----+         +
|                   |
|                   |
+----+----+----+----+
Run Code Online (Sandbox Code Playgroud)

在这种情况下,人们可能认为有18个"可见"的边,但是,因为我们知道相机在几何体之外的事实,所以方形"A"中的4个边是不可见的.

为了使事情进一步复杂化,我希望找到一种算法,如果添加或删除一个块,可以快速更新(再次,一个 MineCraft.)

谢谢!

opengl 3d rendering minecraft

17
推荐指数
1
解决办法
2226
查看次数

关于Android中高性能绘图的提示

背景

我正在为一个Android应用程序编写一个图形库(是的,我知道有很多,但没有提供我们需要的可定制性).

我希望图表可以缩放和平移.

问题

我希望体验顺畅,留下小巧的CPU占用空间.

解决方案

View.onDraw():

优点

  • 一些易于实现的东西

缺点

  • 表现不好?(除非它使用OpenGL,是吗?)

位图:

优点

  • 真的很容易实现
  • 很好的表现;很好的绩效

缺点

  • 必须使用丑陋的缩放

OpenGL的:

优点

  • 可能性能很好,取决于我的实现

缺点

  • 更多工作要实施

最后的话

OpenGL可能是专业的解决方案,肯定会提供更多的灵活性,但它需要更多的工作(多少不清楚).

有一点在OpenGL中更容易实现平移/缩放,因为我可以操纵矩阵来使其正确,其余的应该更难,尽管我认为.

我不怕弄脏手,但我想知道在开始挖掘之前我正朝着正确的方向前进.

我错过了任何解决方案吗?我所有的解决方案都理智吗?


补充说明:

我可以补充一点,当图形发生变化时,我希望对变化进行动画处理,这可能是最苛刻的任务.

performance android drawing rendering opengl-es

17
推荐指数
1
解决办法
3365
查看次数

如何在android webview中优化renderspeed

是否有可能提高webview中的渲染速度?使用简单的innerHTML,显示内容需要接近1秒,尽管js渲染需要几毫秒.使用IOS,即使使用性能较低的硬件,完全相同的代码也可以快速而完美地运行.

在Android下测试:2.3,3.2,4.0(Desire HD,Galaxy Nexus,Galaxy Tab)IOS:4,5(iPhone 3gs,4)

感谢任何有用的回应!

javascript optimization android rendering webview

17
推荐指数
1
解决办法
2万
查看次数

pygal渲染png/svg黑色图片

我正在使用python(在LinuxMint中使用虚拟环境),我安装了pygal.

一切正常(渲染到html)但不渲染到svg或png.结果:只有黑色背景.

我安装cssselecttinycss喜欢这里提到的.

它是第一次工作,但在重试时,我遇到了同样的问题.

(我不知道这是否相关,但在上周使用黑暗表格导出照片时,这种情况发生在我身上)

我使用pygal网站上的例子:

import pygal                                                       # First import pygal
bar_chart = pygal.Bar()                                            # Then create a bar graph object
bar_chart.add('Fibonacci', [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55])  # Add some values
bar_chart.render_to_file('bar_chart.svg')                          # Save the svg to a file
Run Code Online (Sandbox Code Playgroud)

编辑:

bar_chart.render_to_png('bar_chart.png')
Run Code Online (Sandbox Code Playgroud)

现在正在工作.

但不是:

bar_chart.render_to_file('bar_chart.svg')
Run Code Online (Sandbox Code Playgroud)

python svg rendering data-visualization pygal

17
推荐指数
1
解决办法
7556
查看次数

子像素在浏览器中计算和呈现的方式不同

目的:

我正在处理类似于此的代码,以创建一个输入字段具有嵌入按钮的组件:

http://codepen.io/anon/pen/pgwbWG?editors=110

如您所见,按钮绝对定位topbottom设置为0,以实现100%高度元素.

另外需要注意的是,文本输入的边框必须保持可见,并且还要包裹按钮.为了达到这个目的,我margin: 1px按钮上添加了一个,以便(应该是)空间显示周围的文本输入红色边框(通常在输入字段内容无效时).

问题:

就是在Firefox上它(大部分)正确呈现,而在Chrome上(显然在最新的Safari上)它会按钮底部1px的间隙.

CSS似乎确定,但它似乎是在渲染,在底部或按钮的上边距是不是真的1px的计算/舍入的问题(可以看到它检查元素).此外,输入的填充似乎也会影响到.

在不同的缩放率下,它会在按钮的顶部或底部添加或删除1px的边距,从而产生1px间隙或覆盖边框.

当我设置按钮边距时0px,底部边距是固定的,但我松开顶部的1px边距,完成覆盖文本输入的红色边框.

例子:

也许我不明白或解释它太冗长,所以这里是错误的一些截图,从不同的缩放在Chrome(注意CSS始终是相同的):

在此输入图像描述 在此输入图像描述 在此输入图像描述 在此输入图像描述

解决方案:

我无法找到跨浏览器的解决方案.如何处理它并获得一致的组件?(请不要使用Javascript)

css rendering cross-browser css3 subpixel

17
推荐指数
1
解决办法
8752
查看次数

VueJS组件无法渲染

我有一个非常基本的vueJS应用程序,我正在关注该网站.

这是代码,为什么组件不呈现?

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ message }}</p>
</div>

<div>
<ol>
  <todo-item></todo-item>
</ol>
</div>
Run Code Online (Sandbox Code Playgroud)

JS

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

Vue.component('todo-item', {
    template: '<li>This is a list item</li>'
})
Run Code Online (Sandbox Code Playgroud)

javascript rendering vue.js vue-component

17
推荐指数
2
解决办法
3万
查看次数