今天给我的转换服务器更新openoffice版本的时候·也顺便搜索了下jodconverter的版本·在官网上目前还是 2.2.2 版本·但是在 google 的时候发现了 code 上 有 3.0的版本·就立刻下载下来在虚拟机器上做测试,测试后发现 3.0版本 的 jodconverter 做的很不错·支持了服务器多进程,也就说明可以多线程转换了,避免了转换排队现象。

1.下载安装 openoffice 3.2,我的环境是ubuntu所以下载的是deb包,如果你是centos请下载rpm包。

ppt2pdf $> wget http://download.services.openoffice.org/files/localized/zh-CN/3.2.1/OOo_3.2.1_Linux_x86_install-deb_zh-CN.tar.gz ppt2pdf $> tar zxvf OOo_3.2.1_Linux_x86_install-deb_zh-CN.tar.gz ppt2pdf $> cd OOO320_m18_native_packed-1_zh-CN.9502 ppt2pdf $> cd DEBS ppt2pdf $> dpkg -i *.deb

2.然后下载中文字库防止乱码

ppt2pdf $> apt-get install language-pack-zh language-support-fonts-zh

3.下载jodconverter-core-3.0-beta-3-dist.zip(此步骤可滤过次步骤只是测试转换是否成功)

ppt2pdf $> wget http://jodconverter.googlecode.com/files/jodconverter-core-3.0-beta-3-dist.zip ppt2pdf $> unzip jodconverter-core-3.0-beta-3-dist.zip #然后用winscp 上传一个 ppt上来转换· ppt2pdf $> ls daodan.ppt   jodconverter-core-3.0-beta-3 ppt2pdf $> java -jar jodconverter-core-3.0-SNAPSHOT/lib/jodconverter-core-3.0-SNAPSHOT.jar daodan.ppt 1.pdf Dec 29, 2010 4:39:29 PM org.artofsolving.jodconverter.office.ProcessPoolOfficeManager  INFO: ProcessManager implementation is UnixProcessManager Dec 29, 2010 4:39:29 PM org.artofsolving.jodconverter.office.OfficeProcess start INFO: starting process with acceptString 'socket,host=127.0.0.1,port=2002,tcpNoDelay=1' and profileDir '/tmp/.jodconverter_socket_host-127.0.0.1_port-2002' Dec 29, 2010 4:39:30 PM org.artofsolving.jodconverter.office.OfficeProcess start INFO: started process; pid = 7108 Dec 29, 2010 4:39:30 PM org.artofsolving.jodconverter.office.OfficeConnection connect INFO: connected: 'socket,host=127.0.0.1,port=2002,tcpNoDelay=1' Dec 29, 2010 4:39:45 PM org.artofsolving.jodconverter.office.ProcessPoolOfficeManager stop INFO: stopping Dec 29, 2010 4:39:45 PM org.artofsolving.jodconverter.office.OfficeConnection$1 disposing INFO: disconnected: 'socket,host=127.0.0.1,port=2002,tcpNoDelay=1' Dec 29, 2010 4:39:45 PM org.artofsolving.jodconverter.office.ManagedOfficeProcess doEnsureProcessExited INFO: process exited with code 0 Dec 29, 2010 4:39:45 PM org.artofsolving.jodconverter.office.ProcessPoolOfficeManager stop INFO: stopped ppt2pdf $> ls 1.pdf  daodan.ppt   jodconverter-core-3.0-beta-3 

#可以用winscp 下载下来查看。
4.下载 jodconverter-tomcat-2.2.2.zip 和 jodconverter-sample-webapp

ppt2pdf $> wget 'http://downloads.sourceforge.net/project/jodconverter/JODConverter/2.2.2/jodconverter-tomcat-2.2.2.zip?r=http%3A%2F%2Fsourceforge.net%2Fprojects%2Fjodconverter%2Ffiles%2FJODConverter%2F2.2.2%2F&ts=1293612042&use_mirror=nchc'  ppt2pdf $> svn checkout http://jodconverter.googlecode.com/svn/trunk/jodconverter-sample-webapp jodconverter-sample-webapp  解压 jodconverter-tomcat-2.2.2.zip ppt2pdf $> unzip jodconverter-tomcat-2.2.2.zip #删除 2.2.2版本里的web应用程序 ppt2pdf $> rm jodconverter-tomcat-2.2.2/webapps/converter/* -rf  #编译jodconverter-sample-webapp ppt2pdf $> cd jodconverter-sample-webapp/ ppt2pdf $> mvn package #复制编译出来的 web应用程序进 jodconverter-tomcat-2.2.2 ppt2pdf $> cd target/jodconverter-sample-webapp-3.0-SNAPSHOT ppt2pdf $> cp WEB-INF  documentFormats.js  index.jsp ../jodconverter-tomcat-2.2.2/webapps/converter/ -R

5.启动服务

ppt2pdf $> cd jodconverter-tomcat-2.2.2 ppt2pdf $> bin/startup.sh Using CATALINA_BASE:   /root/jodconverter-tomcat-2.2.2 Using CATALINA_HOME:   /root/jodconverter-tomcat-2.2.2 Using CATALINA_TMPDIR: /root/jodconverter-tomcat-2.2.2/temp Using JRE_HOME:       /usr

6.安装 apache php php-pear
#我就用懒人模式安装了·apt-get

ppt2pdf $> apt-get install apache2 php5 php-pear

# 安装 pear 的 Net_URL2

ppt2pdf $> pear install Net_URL2-0.3.1 # 下载安装 HTTP_Request2 ppt2pdf $> wget http://download.pear.php.net/package/HTTP_Request2-0.5.2.tgz ppt2pdf $> tar zxvf HTTP_Request2-0.5.2.tgz ppt2pdf $> cd HTTP_Request2-0.5.2 ppt2pdf $> cp Request2.php /usr/share/php/HTTP/ ppt2pdf $> cp Request2 /usr/share/php/HTTP/ -R

7.创建一个convert.php转换 ppt2pdf 的例子
#打开浏览查看交互页面

#下面我们创建无交互php程序。

ppt2pdf $> cd /var/www ppt2pdf $> vim convert.php
< ?php require_once 'HTTP/Request2.php';  class DocumentConverterClient {      var $url = 'http://localhost:8080/converter/converted/document.pdf';      function convert($inputFile, $outputType) {         $request = new HTTP_Request2($this->url);         $request->setMethod(HTTP_Request2::METHOD_POST)             ->setHeader('Content-Type', 'multipart/form-data')             ->addPostParameter('outputFormat', $outputType)             ->setBody($inputData);         $request->addUpload('inputDocument', $inputFile);          return $request->send()->getBody();     } }  $documentConverter = new DocumentConverterClient();  $inputFile = 'daodan.ppt';               # 要转换的 ppt|doc|pptx|docx $outputFile = 'daodan.pdf';             # 转出来的 pdf $outputType = 'pdf';  $outputData = $documentConverter->convert($inputFile, $outputType); file_put_contents($outputFile, $outputData); ?>

#把传进来的ppt 复制到 www 目录下,给 www 赋予 apache 可写权限

ppt2pdf $> cp ../daodan.ppt /var/www/ ppt2pdf $> chown www-data /var/www

8.打开浏览器测试。

#使用 winscp 下载 转好的 pdf 本地查看

PS:他的多线程,我还未测试,我是从编译的时候,发现可以多线程的,再我测试后,会发布。

转载请注明:文章转载自:Eric's linux and nginx! (http://www.nginxs.com)
本文地址:http://www.nginxs.com/linux/393.html

posted @ 2012-02-11 20:47 小马歌 阅读(2671) | 评论 (0)编辑 收藏
 

1.首先下载FlexPaper的源码。下载地址

2.本人不懂flash,只是百度下,然后自己瞎弄弄的。我用的flash build 4.5

提供个key:1499-4181-9296-6452-2998-3656

首先在flash build中新建一个flex项目,第一步填写项目名称-flexpaper,第二步直接默认,最后一步需要注意下。

选择合并到代码中,要不然你的bin-debug目录下面会出现很多其他的swf文件

然后把你1步下载下来的源码解压。

把这三个目录全部复制到你刚才建立的flex项目根目录下。最后结果是这样的:

这时候打开src目录下面默认包下的flexpaper.mxml文件,加入如下代码,里面paper.swf是从pdf转换过来的,不懂的就看看我说flexpaper的文章。

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
width="100%" height="100%"
xmlns:flexpaper="com.devaldi.controls.flexpaper.*">



<!--Scale为浏览文档的放大比率-->
<flexpaper:FlexPaperViewer width="100%" height="100%"
Scale="1.0" SwfFile="Paper.swf" />

</mx:Application>

然后点击项目的属性,将附加的编译参数修改成如下所示,-source-path=locale/{locale}

 

我记得这些全部完成以后,好像有个文件一处会有错误,如果出错文件前面会有个红×,找到它,然后把那句话去掉,就是一个属性设置。没什么影响。

然后就可以run了。

修改:

1.右上角有一个FP,点击以后出现about

找到如下所示的文件:


打开,搜索bttnInfo,一共就三句,全部注释掉。然后在run,就会发现右上角的FP没了。(print也是在这个文件里面修改的,大家自己看看吧)

2.修改右下角的logo,如下

找到如下文件,打开,找到sizeChanged这个函数。把里面的两句话都注释掉就OK了。(虽然不懂,但是这些看看也都能知道个大概)

好了。修改完毕。至于其他的修改,大家可以自己看看源文件。反正功能老外都帮我们现实了,我们只要修修改改而已。

补充一点,如果想用,入下图:

找到项目bin-debug下面的flexpaper.swf。(其他的swf就是我之前没有合并到代码中的那些swf,如果没有合并的需要把这些swf文件全部一起拷贝)

放在你下载回来的例子中,替换如下:

把刚才的文件改成这个名字就OK了。然后在运行就会发现可以了。

 

上面的方法似乎是把flash已经写死了,下面的这种方法编译出来的swf应该是可以动态加载flash的。(从网上找到的)

<?xml version="1.0" encoding="utf-8"?>  
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:fp="com.devaldi.controls.flexpaper.*"
layout="absolute" width="100%" height="100%"
applicationComplete="initApp();">

<mx:Script>
<![CDATA[
import mx.controls.Alert;

public var _aid = 0;//文档ID

[Bindable]
public var _Scale:Number = 1;//缩放比例

[Bindable]
public var _SwfFile:String = "";//SWF文件路径

[Bindable]
public var _ZoomTransition:String = "easeOut";

[Bindable]
public var _ZoomTime:Number = 0.6;

[Bindable]
public var _ZoomInterval:Number = 0.1;

[Bindable]
public var _FitPageOnLoad:Boolean = false;//加载后适合高度

[Bindable]
public var _FitWidthOnLoad:Boolean = false;//加载后适合宽度

[Bindable]
public var _PrintEnabled:Boolean = true;//是否支持打印

[Bindable]
public var _FullScreenAsMaxWindow:Boolean = false;//是否支付全屏

[Bindable]
public var _ProgressiveLoading:Boolean = false;//是否延迟加载

[Bindable]
public var _localeChain:String = "zh_CN";//语言

private var isFocus:Boolean = false;

//初始化参数
private function initApp():void{
var params:Object = Application.application.parameters;
_Scale = getNumber(params, "Scale", 1);
_SwfFile = getString(params, "SwfFile", "Paper.swf");
_ZoomTransition = getString(params, "ZoomTransition", "easeOut");
_ZoomTime = getNumber(params, "ZoomTime", 0.6);
_ZoomInterval = getNumber(params, "ZoomInterval", 0.1);
_FitPageOnLoad = getBoolean(params, "FitPageOnLoad", false);
_FitWidthOnLoad = getBoolean(params, "FitWidthOnLoad", false);
_PrintEnabled = getBoolean(params, "PrintEnabled", true);
_FullScreenAsMaxWindow = getBoolean(params, "FullScreenAsMaxWindow", false);
_ProgressiveLoading = getBoolean(params, "ProgressiveLoading", true);
_localeChain = params["localeChain"];

//注册事件监听
this.addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
this.addEventListener(MouseEvent.MOUSE_OUT, onMouseOut);

//开放给外部(javascript)调用
ExternalInterface.addCallback("hasFocus", hasFocus);
//ExternalInterface.addCallback("focus", focus);
ExternalInterface.addCallback("setViewerFocus", setViewerFocus);
}



private function onMouseOver(event:MouseEvent):void{
this.isFocus = true;
}

private function onMouseOut(event:MouseEvent):void{
this.isFocus = false;
}

public function hasFocus():Boolean{
//Alert.show("hasFocus");
return isFocus;
}

public function setViewerFocus(isFocus:Boolean):void{
//Alert.show("setViewerFocus");
this.paperViewer.setViewerFocus();
}

/**
*
* 获取String类型参数
* 如果没有,则返回默认值
*
*/
private function getString(params:Object, name:String, def:String):String{
if(params[name] != null){
return params[name];
}
return def;
}

private function getNumber(params:Object, name:String, def:Number):Number{
if(params[name] != null){
return params[name];
}
return def;
}

private function getBoolean(params:Object, name:String, def:Boolean):Boolean{
//Alert.show("比较:"+name);
if(params[name] != null){
return params[name] == "true";
}
return def;
}
]]>
</mx:Script>
<!--mx:Panel x="165" y="76" width="250" height="200" layout="absolute" title="一个人">
<mx:Label x="59" y="37" text="{Scale}" width="88"/>
</mx:Panel-->

<fp:FlexPaperViewer id="paperViewer"
width="100%"
height="100%"
Scale="{_Scale}"
SwfFile="{_SwfFile}"
ZoomTransition="{_ZoomTransition}"
ZoomTime="{_ZoomTime}"
ZoomInterval="{_ZoomInterval}"
FitPageOnLoad="{_FitPageOnLoad}"
FitWidthOnLoad="{_FitWidthOnLoad}"
PrintEnabled="{_PrintEnabled}"
FullScreenAsMaxWindow="{_FullScreenAsMaxWindow}"
ProgressiveLoading="{_ProgressiveLoading}" />
</mx:Application>


但是按照上述方法试了下,就无法调用官方提供的API接口了。原因是上述的程序并没有提供接口(接口在FlexPaperViewer_Base.mxml)这个文件中

只需要加入如下的语句,就可以调用gotoPage接口了

public function gotoPage(p:Number):void{
paperViewer.gotoPage(p);
}

别忘了增加一句监听,给js调用

ExternalInterface.addCallback("gotoPage", gotoPage);
到此OK。编译出来的可以加载API了。
posted @ 2012-02-11 12:10 小马歌 阅读(1785) | 评论 (0)编辑 收藏
 

导语:前年圣诞节上,西班牙程序员Roman Cortes带来了用纯javascript脚本编写的神奇3D圣诞树,令人印象深刻。2月14日情人节就要来临了,还是Roman Cortes,这次他又带来了用javascript脚本编写的红色玫瑰花。用代码做出的玫瑰花,这才是牛逼程序员送给女友的最好情人节礼物呢!(提示:在不同浏览器下观看效果、速度会有很大的不同)








图片是由代码生成,用户可以刷新该页面,重复观看这朵玫瑰的呈现过程。

3D玫瑰花的实现代码如下:

with(m=Math)C=cos,S=sin,P=pow,R=random;c.width=c.height=f=500;h=-250;function p(a,b,c){if(c>60)return[S(a*7)*(13+5/(.2+P(b*4,4)))-S(b)*50,b*f+50,625+C(a*7)*(13+5/(.2+P(b*4,4)))+b*400,a*1-b/2,a];A=a*2-1;B=b*2-1;if(A*A+B*B<1){if(c>37){n=(j=c&1)?6:4;o=.5/(a+.01)+C(b*125)*3-a*300;w=b*h;return[o*C(n)+w*S(n)+j*610-390,o*S(n)-w*C(n)+550-j*350,1180+C(B+A)*99-j*300,.4-a*.1+P(1-B*B,-h*6)*.15-a*b*.4+C(a+b)/5+P(C((o*(a+1)+(B>0?w:-w))/25),30)*.1*(1-B*B),o/1e3+.7-o*w*3e-6]}if(c>32){c=c*1.16-.15;o=a*45-20;w=b*b*h;z=o*S(c)+w*C(c)+620;return[o*C(c)-w*S(c),28+C(B*.5)*99-b*b*b*60-z/2-h,z,(b*b*.3+P((1-(A*A)),7)*.15+.3)*b,b*.7]}o=A*(2-b)*(80-c*2);w=99-C(A)*120-C(b)*(-h-c*4.9)+C(P(1-b,7))*50+c*2;z=o*S(c)+w*C(c)+700;return[o*C(c)-w*S(c),B*99-C(P(b, 7))*50-c/3-z/1.35+450,z,(1-b/1.2)*.9+a*.1, P((1-b),20)/4+.05]}}setInterval('for(i=0;i<1e4;i++)if(s=p(R(),R(),i%46/.74)){z=s[2];x=~~(s[0]*f/z-h);y=~~(s[1]*f/z-h);if(!m[q=y*f+x]|m[q]>z)m[q]=z,a.fillStyle="rgb("+~(s[3]*h)+","+~(s[4]*h)+","+~(s[3]*s[3]*-80)+")",a.fillRect(x,y,1,1)}',0)

当然,感兴趣的人可以了解下面的实现过程与相关理论:

这朵三维代码玫瑰的呈现效果采用了蒙特卡罗方法,创造者对蒙特卡罗方法非常推崇,他表示在功能优化和采样方面,蒙特卡罗方法是“令人难以置信的强大工具”。关于蒙特卡罗方法可以参考:Monte Carlo method 。

具体操作:

外观采样呈现效果绘制

我用了多个不同的形状图来组成这朵代码玫瑰。共使用了31个形状:24个花瓣,4个萼片,2个叶子和1根花茎,其中每一个形状图都用代码进行描绘。

首先,来定义一个采样范围:

function surface(a, b) { // I'm using a and b as parameters ranging from 0 to 1.

return {

x: a*50,

y: b*50

};

// this surface will be a square of 50x50 units of size

}

然后,编写形状描绘代码:

var canvas = document.body.appendChild(document.createElement("canvas")),

context = canvas.getContext("2d"),

a, b, position;

// Now I'm going to sample the surface at .1 intervals for a and b parameters:

for (a = 0; a < 1; a += .1) {

for (b = 0; b < 1; b += .1) {

position = surface(a, b);

context.fillRect(position.x, position.y, 1, 1);

}

}

这时,看到的效果是这样的:

现在,尝试一下更密集的采样间隔:

正如现在所看到的,因为采样间隔越来越密集,点越来越接近,到最高密度时,相邻点之间的距离小于一个像素,肉眼就看不到间隔(见0.01)。为了不造成太大的视觉差,再进一步缩小采样间隔,此时,绘制区已经填满(比较结果为0.01和0.001)。

接下来,我用这个公式来绘制一个圆形:(X-X0)^ 2 +(Y-Y0)^ 2 <半径^ 2,其中(X0,Y0)为圆心:

function surface(a, b) {

var x = a * 100,

y = b * 100,

radius = 50,

x0 = 50,

y0 = 50;

if ((x - x0) * (x - x0) + (y - y0) * (y - y0) < radius * radius) {

// inside the circle

return {

x: x,

y: y

};

} else {

// outside the circle

return null;

}

}

为了防止溢出,还要加上一个采样条件:

if (position = surface(a, b)) {

context.fillRect(position.x, position.y, 1, 1);

}

结果如下:

有不同的方法来定义一个圆,其中一些并不需要拒绝采样。我并无一定要使用哪一种来定义圆圈的意思,所以下面用另一种方法来定义一个圆:

function surface(a, b) {

// Circle using polar coordinates

var angle = a * Math.PI * 2,

radius = 50,

x0 = 50,

y0 = 50;

return {

x: Math.cos(angle) * radius * b + x0,

y: Math.sin(angle) * radius * b + y0

};

}

如图:

(此方法相比前一个方法需要密集采样以进行填充。)

好了,现在让圆变形,以使它看起来更像是一个花瓣:

function surface(a, b) {

var x = a * 100,

y = b * 100,

radius = 50,

x0 = 50,

y0 = 50;

if ((x - x0) * (x - x0) + (y - y0) * (y - y0) < radius * radius) {

return {

x: x,

y: y * (1 + b) / 2 // deformation

};

} else {

return null;

}

}

结果:

这看起来已经很像一个玫瑰花瓣的形状了。在这里也可以试试通过修改一些函数数值,将会出现很多有趣的形状。

接下来应该给它添加色彩了:

function surface(a, b) {

var x = a * 100,

y = b * 100,

radius = 50,

x0 = 50,

y0 = 50;

if ((x - x0) * (x - x0) + (y - y0) * (y - y0) < radius * radius) {

return {

x: x,

y: y * (1 + b) / 2,

r: 100 + Math.floor((1 - b) * 155), // this will add a gradient

g: 50,

b: 50

};

} else {

return null;

}

}

for (a = 0; a < 1; a += .01) {

for (b = 0; b < 1; b += .001) {

if (point = surface(a, b)) {

context.fillStyle = "rgb(" + point.r + "," + point.g + "," + point.b + ")";

context.fillRect(point.x, point.y, 1, 1);

}

}

}

结果:

一片带色的花瓣就出现了。

3D曲面和透视投影

定义三维表面很简单,比如,来定义一个管状物体:

function surface(a, b) {

var angle = a * Math.PI * 2,

radius = 100,

length = 400;

return {

x: Math.cos(angle) * radius,

y: Math.sin(angle) * radius,

z: b * length - length / 2, // by subtracting length/2 I have centered the tube at (0, 0, 0)

r: 0,

g: Math.floor(b * 255),

b: 0

};

}

接着添加投影透视图,首先需要我们定义一个摄像头:

如上图,将摄像头放置在(0,0,Z)位置,画布在X / Y平面。投影到画布上的采样点为:

var pX, pY, // projected on canvas x and y coordinates

perspective = 350,

halfHeight = canvas.height / 2,

halfWidth = canvas.width / 2,

cameraZ = -700;

for (a = 0; a < 1; a += .001) {

for (b = 0; b < 1; b += .01) {

if (point = surface(a, b)) {

pX = (point.x * perspective) / (point.z - cameraZ) + halfWidth;

pY = (point.y * perspective) / (point.z - cameraZ) + halfHeight;

context.fillStyle = "rgb(" + point.r + "," + point.g + "," + point.b + ")";

context.fillRect(pX, pY, 1, 1);

}

}

}

效果为:

z-buffer

z-buffer在计算机图形学中是一个相当普遍的技术,在为物件进行着色时,执行“隐藏面消除”工作,使隐藏物件背后的部分就不会被显示出来。

上图是用z-buffer技术处理后的玫瑰。(可以看到已经具有立体感了)

代码如下:

var zBuffer = [],

zBufferIndex;

for (a = 0; a < 1; a += .001) {

for (b = 0; b < 1; b += .01) {

if (point = surface(a, b)) {

pX = Math.floor((point.x * perspective) / (point.z - cameraZ) + halfWidth);

pY = Math.floor((point.y * perspective) / (point.z - cameraZ) + halfHeight);

zBufferIndex = pY * canvas.width + pX;

if ((typeof zBuffer[zBufferIndex] === "undefined") || (point.z < zBuffer[zBufferIndex])) {

zBuffer[zBufferIndex] = point.z;

context.fillStyle = "rgb(" + point.r + "," + point.g + "," + point.b + ")";

context.fillRect(pX, pY, 1, 1);

}

}

}

}

旋转

你可以使用任何矢量旋转的方法。在代码玫瑰的创建中,我使用的是欧拉旋转。现在将之前编写的管状物进行旋转,实现绕Y轴旋转:

function surface(a, b) {

var angle = a * Math.PI * 2,

radius = 100,

length = 400,

x = Math.cos(angle) * radius,

y = Math.sin(angle) * radius,

z = b * length - length / 2,

yAxisRotationAngle = -.4, // in radians!

rotatedX = x * Math.cos(yAxisRotationAngle) + z * Math.sin(yAxisRotationAngle),

rotatedZ = x * -Math.sin(yAxisRotationAngle) + z * Math.cos(yAxisRotationAngle);

return {

x: rotatedX,

y: y,

z: rotatedZ,

r: 0,

g: Math.floor(b * 255),

b: 0

};

}

效果:

蒙特卡罗方法

关于采样时间,间隔过大过小都会引起极差的视觉感受,所以,需要设置合理的采样间隔,这里使用蒙特卡罗方法。

var i;

window.setInterval(function () {

for (i = 0; i < 10000; i++) {

if (point = surface(Math.random(), Math.random())) {

pX = Math.floor((point.x * perspective) / (point.z - cameraZ) + halfWidth);

pY = Math.floor((point.y * perspective) / (point.z - cameraZ) + halfHeight);

zBufferIndex = pY * canvas.width + pX;

if ((typeof zBuffer[zBufferIndex] === "undefined") || (point.z < zBuffer[zBufferIndex])) {

zBuffer[zBufferIndex] = point.z;

context.fillStyle = "rgb(" + point.r + "," + point.g + "," + point.b + ")";

context.fillRect(pX, pY, 1, 1);

}

}

}

}, 0);

设置a和b为随机参数,用足够的采样完成表面填充。我每次绘制10000点,然后静待屏幕完成更新。

另外需要注意的是,如果随机数发生错误时,表面填充效果会出错。有些浏览器中,Math.random的执行是线性的,这就有可能导致表面填充效果出错。这时,就得使用类似Mersenne Twister(一种随机数算法)这样的东西去进行高质量的PRNG采样,从而避免错误的发生。

完成

为了使玫瑰的每个部分在同一时间完成并呈现,还需要添加一个功能,为每部分设置一个参数以返回值来进行同步。并用一个分段函数代表玫瑰的各个部分。比如在花瓣部分,我用旋转和变形来创建它们。

虽然表面采样方法是创建三维图形非常著名的、最古老的方法之一,但这种把蒙特卡罗、z-buffer加入到表面采样中的方法并不常见。对于现实生活场景的制作,这也许算不上很有创意,但它简易的代码实现和很小的体积仍令人满意。

希望这篇文章能激发计算机图形学爱好者来尝试不同的呈现方法,并从中获得乐趣。(Roman Cortes)

英文原址:romancortes.com 

posted @ 2012-02-10 11:59 小马歌 阅读(361) | 评论 (0)编辑 收藏
 
     摘要: 最近尝试将做的一个Android项目web化,而其中的一个方案,就是做成html5的。于是做了一些Demo,也做了一些简单的研究。其中一个比较重要的问题,就是HTML5在Android和IOS的兼容性如何。找到下面的表格,很好的解答了我的问题。与看到这篇博文的好友一起分享。FeatureSafari on iOSAndroid BrowserBlackBerry BrowserNokia...  阅读全文
posted @ 2012-02-09 16:07 小马歌 阅读(1300) | 评论 (0)编辑 收藏
 

无论是从技术角度还是开发视角,对于web前端开发规范文档都有一定规范,本文就css3和html5的发展前景总结了一系列的web开发文档,仅供大家参考。

规范目的

为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改.

基本准则

符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度.

文件规范

1. html, css, js, images文件均归档至<系统开发规范>约定的目录中;

2. html文件命名: 英文命名, 后缀.htm. 同时将对应界面稿放于同目录中, 若界面稿命名为中文, 请重命名与html文件同名, 以方便后端添加功能时查找对应页面;

3. css文件命名: 英文命名, 后缀.css. 共用base.css, 首页index.css, 其他页面依实际模块需求命名.;

4. Js文件命名: 英文命名, 后缀.js. 共用common.js, 其他依实际模块需求命名.

html书写规范

1. 文档类型声明及编码: 统一为html5声明类型<!DOCTYPE html>; 编码统一为<meta charset=”utf-8″ />, 书写时利用IDE实现层次分明的缩进;

2. 非特殊情况下样式文件必须外链至<head>…</head>之间;非特殊情况下JavaScript文件必须外链至页面底部;

3. 引入样式文件或JavaScript文件时, 须略去默认类型声明, 写法如下:

<link rel=”stylesheet” href=”…” />

<style>…</style>

<script src=”…”></script>

4. 引入JS库文件, 文件名须包含库名称及版本号及是否为压缩版, 比如jquery-1.4.1.min.js; 引入插件, 文件名格式为库名称+插件名称, 比如jQuery.cookie.js;

5. 所有编码均遵循xhtml标准, 标签 & 属性 & 属性命名 必须由小写字母及下划线数字组成, 且所有标签必须闭合, 包括br (<br />), hr(<hr />)等; 属性值必须用双引号包括;

6. 充分利用无兼容性问题的html自身标签, 比如span, em, strong, optgroup, label,等等; 需要为html元素添加自定义属性的时候, 首先要考虑下有没有默认的已有的合适标签去设置, 如果没有, 可以使用须以”data-”为前缀来添加自定义属性,避免使用”data:”等其他命名方式;

7. 语义化html, 如 标题根据重要性用h*(同一页面只能有一个h1), 段落标记用p, 列表用ul, 内联元素中不可嵌套块级元素;

8. 尽可能减少div嵌套, 如<div class=”box”><div class=”welcome”>欢迎访问XXX, 您的用户名是<div class=”name”>用户名</div></div></div>完全可以用以下代码替代: <div class=”box”><p>欢迎访问XXX, 您的用户名是<span>用户名</span></p></div>;

9. 书写链接地址时, 必须避免重定向,例如:href=”http://itaolun.com/”, 即须在URL地址后面加上“/”;

10. 在页面中尽量避免使用style属性,即style=”…”;

11. 必须为含有描述性表单元素(input, textarea)添加label, 如<p>姓名: <input type=”text” id=”name” name=”name” /></p>须写成:<p><label for=”name”>姓名: </label><input type=”text” id=”name” /></p>

12. 能以背景形式呈现的图片, 尽量写入css样式中;

13. 重要图片必须加上alt属性; 给重要的元素和截断的元素加上title;

14. 给区块代码及重要功能(比如循环)加上注释, 方便后台添加功能;

15. 特殊符号使用: 尽可能使用代码替代: 比如 <(<) & >(&gt;) & 空格( ) & ?(?) 等等;

16. 书写页面过程中, 请考虑向后扩展性;

17. class & id 参见 css书写规范.

css书写规范

1. 编码统一为utf-8;

2. 协作开发及分工: i会根据各个模块, 同时根据页面相似程序, 事先写好大体框架文件, 分配给前端人员实现内部结构&表现&行为; 共用css文件base.css由i书写, 协作开发过程中, 每个页面请务必都要引入, 此文件包含reset及头部底部样式, 此文件不可随意修改;

3. class与id的使用: id是唯一的并是父级的, class是可以重复的并是子级的, 所以id仅使用在大的模块上, class可用在重复使用率高及子级中; id原则上都是由我分发框架文件时命名的, 为JavaScript预留钩子的除外;

4. 为JavaScript预留钩子的命名, 请以 js_ 起始, 比如: js_hide, js_show;

5. class与id命名: 大的框架命名比如header/footer/wrapper/left/right之类的在2中由i统一命名.其他样式名称由 小写英文 & 数字 & _ 来组合命名, 如i_comment, fontred, width200; 避免使用中文拼音, 尽量使用简易的单词组合; 总之, 命名要语义化, 简明化.

6. 规避class与id命名(此条重要, 若有不明白请及时与i沟通):

a, 通过从属写法规避, 示例见d;

b, 取父级元素id/class命名部分命名, 示例见d;

c, 重复使用率高的命名, 请以自己代号加下划线起始, 比如i_clear;

d, a,b两条, 适用于在2中已建好框架的页面, 如, 要在2中已建好框架的页面代码<div id=”mainnav”></div>中加入新的div元素,

按a命名法则: <div id=”mainnav”><div class=”firstnav”>…</div></div>,

样式写法:  #mainnav  .firstnav{…….}

按b命名法则: <div id=”mainnav”><div class=”main_firstnav”>…</div></div>,

样式写法:  .main_firstnav{…….}

7. css属性书写顺序, 建议遵循 布局定位属性–>自身属性–>文本属性–>其他属性. 此条可根据自身习惯书写, 但尽量保证同类属性写在一起. 属性列举: 布局定位属性主要包括: margin & padding & float(包括clear) & position(相应的 top,right,bottom,left) & display & visibility & overflow等; 自身属性主要包括: width  &  height  &  background  &  border; 文本属性主要包括: font & color & text-align & text-decoration & text-indent等;其他属性包括: list-style(列表样式) & vertical-vlign & cursor & z-index(层叠顺序)  & zoom等. 我所列出的这些属性只是最常用到的, 并不代表全部;

8. 书写代码前, 考虑并提高样式重复使用率;

9. 充分利用html自身属性及样式继承原理减少代码量, 比如:

<ul class=”list”><li>这儿是标题列表<span>2010-09-15</span></ul>

定义

ul.list li{position:relative}  ul.list li span{position:absolute; right:0}

即可实现日期居右显示

10. 样式表中中文字体名, 请务必转码成unicode码, 以避免编码错误时乱码;

11. 背景图片请尽可能使用sprite技术, 减小http请求, 考虑到多人协作开发, sprite按模块制作;

12. 使用table标签时(尽量避免使用table标签), 请不要用width/ height/cellspacing/cellpadding等table属性直接定义表现, 应尽可能的利用table自身私有属性分离结构与表现, 如thead,tr,th,td,tbody,tfoot,colgroup,scope; (cellspaing及cellpadding的css控制方法: table{border:0;margin:0;border-collapse:collapse;} table th, table td{padding:0;} , base.css文件中我会初始化表格样式)

13. 杜绝使用<meta http-equiv=”X-UA-Compatible” content=”IE=7″ /> 兼容ie8;

14. 用png图片做图片时, 要求图片格式为png-8格式,若png-8实在影响图片质量或其中有半透明效果, 请为ie6单独定义背景:

_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’img/bg.png’);

15. 避免兼容性属性的使用, 比如text-shadow || css3的相关属性;

16. 减少使用影响性能的属性, 比如position:absolute || float ;

17. 必须为大区块样式添加注释, 小区块适量注释;

18. 代码缩进与格式: 建议单行书写, 可根据自身习惯, 后期优化i会统一处理;

JavaScript书写规范

1. 文件编码统一为utf-8, 书写过程过, 每行代码结束必须有分号; 原则上所有功能均根据XXX项目需求原生开发, 以避免网上down下来的代码造成的代码污染(沉冗代码 || 与现有代码冲突 || …);

2. 库引入: 原则上仅引入jQuery库, 若需引入第三方库, 须与团队其他人员讨论决定;

3. 变量命名: 驼峰式命名. 原生JavaScript变量要求是纯英文字母, 首字母须小写, 如iTaoLun;

jQuery变量要求首字符为’_’, 其他与原生JavaScript 规则相同, 如: _iTaoLun;

另, 要求变量集中声明, 避免全局变量.

4. 类命名: 首字母大写, 驼峰式命名. 如 ITaoLun;

5. 函数命名: 首字母小写驼峰式命名. 如iTaoLun();

6. 命名语义化, 尽可能利用英文单词或其缩写;

7. 尽量避免使用存在兼容性及消耗资源的方法或属性, 比如eval() & innerText;

8. 后期优化中, JavaScript非注释类中文字符须转换成unicode编码使用, 以避免编码错误时乱码显示;

9. 代码结构明了, 加适量注释. 提高函数重用率;

10. 注重与html分离, 减小reflow, 注重性能.

图片规范

1. 所有页面元素类图片均放入img文件夹, 测试用图片放于img/demoimg文件夹;

2. 图片格式仅限于gif || png || jpg;

3. 命名全部用小写英文字母 || 数字 || _ 的组合,其中不得包含汉字 || 空格 || 特殊字符;尽量用易懂的词汇, 便于团队其他成员理解; 另, 命名分头尾两部分, 用下划线隔开, 比如ad_left01.gif || btn_submit.gif;

4. 在保证视觉效果的情况下选择最小的图片格式与图片质量, 以减少加载时间;

5. 尽量避免使用半透明的png图片(若使用, 请参考css规范相关说明);

6. 运用css sprite技术集中小的背景图或图标, 减小页面http请求, 但注意, 请务必在对应的sprite psd源图中划参考线, 并保存至img目录下.

注释规范

1. html注释: 注释格式 <!–这儿是注释–>, ’–’只能在注释的始末位置,不可置入注释文字区域;

2. css注释: 注释格式 /*这儿是注释*/;

3. JavaScript注释, 单行注释使用’//这儿是单行注释’ ,多行注释使用 /* 这儿有多行注释 */;

开发及测试工具约定

建议使用Aptana || Dw || Vim , 亦可根据自己喜好选择, 但须遵循如下原则:

1. 不可利用IDE的视图模式’画’代码;

2. 不可利用IDE生成相关功能代码, 比如Dw内置的一些功能js;

3. 编码必须格式化, 比如缩进;

测试工具: 前期开发仅测试FireFox & IE6 & IE7 & IE8 , 后期优化时加入Opera & Chrome & Safari;

建议测试顺序: FireFox–>IE7–>IE8–>IE6–>Opera–>Chrome–>Safari, 建议安装firebug及IE Tab Plus插件.

其他规范

1. 开发过程中严格按分工完成页面, 以提高css复用率, 避免重复开发;

2. 减小沉冗代码, 书写所有人都可以看的懂的代码. 简洁易懂是一种美德. 为用户着想, 为服务器着想.

posted @ 2012-02-02 21:51 小马歌 阅读(257) | 评论 (0)编辑 收藏
 
posted @ 2012-02-02 21:02 小马歌 阅读(146) | 评论 (0)编辑 收藏
 

移动这一块目前是iPhone遥遥领先,程序员是爱买Android,一般老百姓还是偏向iPhone。现在做手机程序的统统是iPhone优先策略——做一个程序,先写iPhone版,第二才考虑Android。在iPhone的带动下,Mac OS 在美国市场占有率都上升到9%了,相当可怕,有人认为苹果将成为九十年代带的微软。

  从根子上来讲,谷歌是一家广告公司,苹果是一家设计公司,如果只是他们俩在竞争,鹿死谁手还真不好说;可Android是一个开源程序,开源是IT界的倾销手段,因为它免费的正大光明。真正在背后支持Android的力量,是三星、摩托罗拉这些被苹果抢了市场分额的手机公司,没有Android,这些手机公司就活不了了(当然,现在又有了WP7……)。此外,因为Android是开源的,它会被大量应用到其他产品上,就是所谓的物联网。Android以后会成为高端的设备上的嵌入式开发平台,比如汽车App或者其他什么的。应用广就意味着更大的程序员群体,更大的群体意味着技术发展的更快……形成一种良性循环。苹果的系统只能在iPhone上跑,应用面就窄的多。所以笔者认为苹果不会成为就九十年代的微软,笔者认为苹果将成为……还是九十年代的苹果。孤芳自赏是没有好下场的。

  不过,笔者觉得这俩平台都不是未来的Windows,Windows是一个不能被重复的传说。你看,就算Android能打赢iOS,它能垄断市场吗?不能。苹果也不是吃素的,Android和iOS在未来一段时间内应该都是齐头并进,更何况现在又出了Windows Phone,还有黑莓和诺基亚……不能因为过气了你就当人家不存在呀,俗话说瘦死的骆驼比马大不是?也就是说,移动平台注定是百花齐放的局面,不可能出现当年Windows一统江山的情景。那么,如果没有统一的操作系统,开发程序就是一件麻烦的事情,同一个软件要写好几个版本,这事儿效率太低。当多平台并存已成定局的时候,群众最需要的就是跨平台的技术。

  目前开发移动程序框架选择很多,从Web App,到PhoneGap,Titanium,MonoTouch,再到Native App,总有一款适合你。规律是,兼容性越强的技术,成本越低,性能越差;兼容性越差的技术,成本越高,性能越好。在众多框架里,笔者最看好PhoneGap。有以下两个原因:

  1、兼容性。完全做到了written once, run everywhere。

  2、标准化。PhoneGap用W3C标准,特别标准,Web App直接一字不改就能运行。尤其是和JQ Mobile结合在一起使用,实在是威力无穷啊!

  3、用JavaScript+HTML5。你说这和iOS以及Anroid的代码加XML有区别吗?我看都差不多。

  当然目前PhoneGap缺陷还是蛮多的,比如运行速度慢,UI反应延时——这是个致命伤。不过嘛,这种问题是会随着技术的进步而消失的。它的优势是无以伦比的:开发成本低——笔者个人估计,至多是Native App的五分之一吧。伟大导师马克思教导我们说,资本有了300%的利润,就敢践踏一切人间法律。跨平台的流行是不可避免的。当然,Native App永远会有一席之地,比如高端游戏。

  有的技术虽然高明,如果找不到切入点也流行不起来。就算再有潜力的种子,没有生存的土壤也长不成大树。最典型的例子就是标准Qwerty键盘,再不好使大家也一直在用。PhoneGap是不会成为空中楼阁的,它现在已经遍地开花了,网上很多招工都指明要PhoneGap做。表面上看来,做PhoneGap的是温哥华的一家小公司,但是……和Android一样,PhoneGap也是开源项目,这里头猫腻可就多了去啦。现在,IBM给PhoneGap贡献的代码,比PhoneGap母公司还多!为啥大家这么支持PhoneGap呢?笔者觉得JQ Mobile主页上的一张合作伙伴的图特别说明问题,请看:

PhoneGap移动开发框架

  这张图片的名字就叫……找找少了谁?咦,怎么没有谷歌呀。谷歌不是一直支持JQuery,最Web Centric吗,怎么不支持JQ Mobile了?是了,谷歌有Android,不需要Web App也可以分到一大块市场,甚至Web App会降低开发门槛,反而会削弱Android的竞争力。利益当前,谷歌把不作恶这事儿也忘了。但是,就像新闻联播里经常说的,人民,只有人民才是这世界的主人。历史潮流是挡不住的,谁都不行,谷歌也不行。看看上面图片里这些公司,黑莓、诺基亚、Palm……他们都是曾经的强者,现在却是被Android和iOS边缘化的弱者。如果你想做移动开发,你可能选择Android,也可能选择iOS,但你会选择黑莓吗?诺基亚?——没有应用程序是操作系统最大的痛啊。因此,他们才是最需要跨平台技术的。每多一个跨平台技术的程序员,就等于多了一个黑莓程序员、诺基亚程序员……跨平台也是符合生产力发展规律的,是进步的,是革命的,是人民的呼声!弱者单独看起来很弱,团结起来便力量惊人,可以战胜一切,可以推翻霸权,伟大领袖都是这么做的。


PhoneGap前景

  Adobe最近公开表示将会为HTML5开发推出更多有意义的工具。有业内人士表示,Adobe的HTML5战略特别值得注意,此外Adobe对于乔布斯的此番公开批评曾积极地回应道:“乔布斯说的不都是对的。”可一年半后,Adobe弃Flash而去,转投封闭王国苹果支持的为数不多的开放标准之一——HTML5。这是个好的信号,在flash和html5之间犹豫的开发者可以大胆的使用phonegap了,另外html5更注重移动平台,flash更适合pc端。在html5移动应用的架构选择上,PhoneGap无疑是最佳的开发模式。

posted @ 2012-02-02 16:15 小马歌 阅读(203) | 评论 (0)编辑 收藏
 
     摘要: 一种 动态 样式 语言.LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承,运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可一在服务端运行 (借助Node.js).网站地址:http://www.lesscss.net/变量变量允许我们单独定义一系...  阅读全文
posted @ 2012-02-02 11:00 小马歌 阅读(705) | 评论 (0)编辑 收藏
 

    今日,Twitter 在 Github 公布了 Bootstrap 2.0 版本的源代码(源码链接)。

    Bootstrap 是 Twitter 推出的一套用于快速搭建网页应用的轻量级前端开发工具。它由 Twitter 设计师 Mark Otto 和 Jacob Thornton 合作开发。Bootstrap 是一套用于开发网页应用,符合 HTML 和 CSS 简洁但优美规范的库。Bootstrap 由动态 CSS 语言 Less 写成,在很多方面类似 CSS 框架 Blueprint。经过编译后,Bootstrap 就是众多 CSS 的合集。

轻量级前端开发工具Bootstrap重大改进,Twitter发布Bootstrap 2.0

Twitter今日在开发者博客上公布消息,6个月前发布的轻量级前端开发工具Bootstrap迎来重大改进,正式升级为Bootstrap 2.0(下载源码)。和原来一样,Bootstrap 2.0仍然是一个托管在GitHub上的开源项目。

去年8月,Twitter推出了用于快速搭建网页应用的轻量级前端开发工具Bootstrap,由Twitter的设计师Mark OttoJacob Thornton合作完成。Bootstrap是一套用于开发网页应用,符合HTML和CSS简洁但优美规范的库。Bootstrap由动态CSS语言Less写成,在很多方面类似CSS框架Blueprint。经过编译后,Bootstrap就是众多CSS的合集。想要了解Bootstrap的细节,开发者请参考Twitter的官方指南演示示例

Bootstrap 2.0的开发过程中, Mark Otto参考了不少来自社区的意见和Twitter前端重新设计过程中积累的经验。 除了增加新样式外,Bootstrap 2.0修改了一些网页元素的默认样式,除去了上一版本中的几十个Bug,同时完善了说明文档。目前,使用Bootstrap的案例有NASA和MSNBC的Breaking News

此次升级的细节请参考这里

 

posted @ 2012-02-02 10:58 小马歌 阅读(231) | 评论 (0)编辑 收藏
 

img的lowsrc是指当网速比较慢时,先加载一个小的图片,等大图加载完了再显示大图。

虽然现有的网速已经很快了,但是lowsrc的思想在提高用户体验上还是有很大好处,尤其是图片比较大的时候。

当然img的lowsrc没有出现在Web标准里面,那么如何去模拟呢?

主要有两种形式:

一、给img一个背景色或背景图片,这样也能达到类似的效果,虽然不是最理想的;

二、使用JS,实现上应该还是是比较容易的,以下是我的一种写法(当然不同的需求有不同的写法):

Code   ViewPrint
  1. <script type="text/javascript">  
  2. function load_img(url,url_s,o) {  
  3.     var img = new Image();  
  4.     img.src = url;  
  5.     o.src=url_s;  
  6.    if (img.complete) {  
  7.         o.src=img.src;  
  8.         return;  
  9.     }  
  10.     img.onload = function () {  
  11.         o.src=img.src;  
  12.     };  
  13. };  
  14. </script>  
  15. <input type="button" value="开始加载" onclick="load_img('http://blog.xhlv.com/wp-content/uploads/2008/09/20080927_02.jpg','http://blog.xhlv.com/wp-content/uploads/2008/09/20080927_01.jpg',document.getElementById('img'))" />  
  16. <div><img src="" width="500" height="321" id="img"/></div>  
posted @ 2012-02-01 18:36 小马歌 阅读(1534) | 评论 (0)编辑 收藏
仅列出标题
共95页: First 上一页 42 43 44 45 46 47 48 49 50 下一页 Last