为DHTML游戏旋转，倾斜，调整大小 [英] Rotate, skew, resize for DHTML game
问题描述
是否有方法可以在JavaScript中操作图像，这样我就可以编写旋转，倾斜，遮罩和调整图像大小（位图）的功能？
这些功能需要足够快才能在自上而下的滚动游戏中使用。
或者我会更好地预处理所有图像的东西
服务器端如此作为PHP然后将它们预加载到我的JavaScript中
被操纵了吗？
我唯一不喜欢预处理图像的想法是
我将不得不预先加载大量的图像，即所有的
精灵以不同的角度旋转，调整大小不同等等。
我正在考虑使用Flash但因为它涉及学习
ActionScript我更喜欢用JavaScript和
PHP的组合来实现。我正在考虑的另一种选择是使用SVG，但不是很多人拥有支持SVG的浏览器或者已经下载了SVG插件。
也会欣赏任何资源的链接，可以帮助我这个
的东西。 TIA！
Are there methods for manipulating images in JavaScript that would allow me
to write functions to rotate, skew, mask and resize images (bitmaps)?
The functions need to be fast enough for use in a top-down scrolling game.
Or would I be better off preprocessing all of the images with something
server side such as PHP and then preloading them into my JavaScript already
manipulated?
The only thing I don''t like about the idea of preprocessing the images is
that I will have to preload a very large number of images, ie all of the
sprites rotated at different angles, resized at different sizes etc.
I am considering using Flash but because it would involve learning
ActionScript I would prefer to do it with a combination of JavaScript and
PHP. The other alternative that I was considering was using SVG, but not
many people have an SVG capable browser or have downloaded the SVG plugin.
Would also appreciate any links to resources that would help me with this
sort of thing. TIA!
推荐答案
Nik Coughlin写道：
Nik Coughlin wrote:
是否存在在JavaScript中操纵图像的方法我编写旋转，倾斜，遮罩和调整图像大小（位图）的功能？
Are there methods for manipulating images in JavaScript that would allow me
to write functions to rotate, skew, mask and resize images (bitmaps)?
编号JS无法转动，旋转或以其他方式操纵图片：-\
我希望它能...
-
Randy
comp.lang.javascript常见问题 - http://jibbering.com/faq
我不是在宣传Microsloth或其任何产品，而是......
AFAIK IE5.5让图像和文字旋转偏斜通过
调整过滤器和样式对象的大小
用于调整大小
currEl.style.zoom = var +''％'';
旋转
var deg2radians = Math.PI * 2/360;
currEl.style.filter =" progid：DXIm ageTransform.Micro soft.Matrix（sizingMethod =''
auto expand''）" ;;
//我使用onmousemove来捕获event.clientX / Y来生成' '旋转''值
所以用户可以用鼠标拖动旋转或倾斜
document.onmouseover = makeRotationParam;
var lastX = 0 ，lastY = 0;
函数makeRotationParam（）{
var x = event.clientX，y = event.clientY;
var aValue =计算当前和最后一个鼠标位置的差异
根据您的需要;
lastX = x;
lastY = y;
rotateObj（aValue）;
}
函数rotateObj（旋转）{
if（rotation> = 360）rotation = 0;
var rad = rotation * deg2radians;
var costheta = Math.cos（rad）;
var sintheta = Math.sin（rad） ;
currEl.filters.item（0）.M11 = costheta;
currEl.filters.item（0）.M12 = -sintheta;
currEl.filters.item（0）.M21 = sintheta;
currEl.f ilters.item（0）.M22 = costheta;
}
如果你摆弄过滤器参数（M11 ......）和/或rad / sin / cos
值你会发现偏差和更多
Jimbo
" Randy Webb" <您好************ @ aol.com>在消息中写道
news :-P ******************** @ comcast.com ...
I am not promoting Microsloth or any of it''s products but...
AFAIK IE5.5 alows images and text to be rotated skewed and resized through
the filter and style objects
for resizing
currEl.style.zoom=var+''%'';
for rotation
var deg2radians = Math.PI * 2 / 360;
currEl.style.filter="progid:DXImageTransform.Micro soft.Matrix(sizingMethod=''
auto expand'')";
// I use onmousemove to trap event.clientX/Y to produce ''rotation'' values
so the user can rotate or skew with a mouse drag
document.onmouseover=makeRotationParam;
var lastX=0, lastY=0;
function makeRotationParam() {
var x=event.clientX, y=event.clientY;
var aValue=compute differences in current and last mouse position
according to your needs;
lastX=x;
lastY=y;
rotateObj(aValue);
}
function rotateObj(rotation) {
if(rotation>=360) rotation=0;
var rad = rotation * deg2radians ;
var costheta = Math.cos(rad);
var sintheta = Math.sin(rad);
currEl.filters.item(0).M11 = costheta;
currEl.filters.item(0).M12 = -sintheta;
currEl.filters.item(0).M21 = sintheta;
currEl.filters.item(0).M22 = costheta;
}
and if you fiddle with the filter params (M11...) and/or the rad/sin/cos
values you''ll find the skew and more
Jimbo
"Randy Webb" <Hi************@aol.com> wrote in message
news:-P********************@comcast.com...
Nik Coughlin写道：
Nik Coughlin wrote:
是否存在在JavaScript中操作图像的方法，这些方法允许我用b $ b来编写旋转，倾斜，遮罩和调整图像大小（位图）的函数？
Are there methods for manipulating images in JavaScript that would allow me to write functions to rotate, skew, mask and resize images (bitmaps)?
JS没有能力转动，旋转或以其他方式操纵图像：-\
我希望它能做到......
- <兰迪
comp.lang.javascript常见问题 - http://jibbering.com/faq
Hi Nik
你不能用JavaScript做到这一点，但你可以使用JavaScript来调用Java和
Java可以做到这一点。如果你能掌握J.A.PewInstant Java （ISBN
0-13-565821-7），那么你会发现这本书附带了一张CD，其上已经提供了必要的Java小程序。你可以这样的方式使用它们来弄脏你的手。如果您只能获得一张没有CD的二手副本，那么它仍然包含您需要的所有源代码。
一切顺利
Ian
2004/09/04 03:16，文章 2p ************ @ uni-berlin.de ，Nik Coughlin
< nrkn！希望没有sp***@woosh.co.nz>写道：
Hi Nik
You can''t do this in JavaScript, but you can use JavaScript to call Java and
Java can do it. If you can get hold of J.A.Pew "Instant Java" (ISBN
0-13-565821-7), then you will find that the book comes with a CD on which
the necessary Java applets are already provided in such a way that you can
use them with getting your hands dirty. And if you can only get a
second-hand copy with the CD missing, it still has all the source code you
need.
All the best
Ian
On 2004/09/04 03:16, in article 2p************@uni-berlin.de, "Nik Coughlin"
<nrkn!hopefully no sp***@woosh.co.nz> wrote:
有没有方法可以在JavaScript中操作图像，这些方法可以让我编写旋转，倾斜，遮罩和调整图像大小（位图）的功能？
这些函数需要足够快才能在自上而下的滚动游戏中使用。
或者我会更好地使用服务器端（如PHP）预先处理所有图像然后预加载它们已经被我的JavaScript操作了吗？
我唯一不喜欢预处理图像的想法是
我将不得不预加载一个非常大的数字图像，即所有以不同角度旋转的精灵，调整大小不等等。
我正在考虑使用Flash，但因为它涉及学习
ActionScript我更喜欢使用JavaScript和
PHP的组合来完成它。我正在考虑的另一种选择是使用SVG，但不是很多人拥有支持SVG的浏览器或者已经下载了SVG插件。
也会感谢任何有助于我的资源链接有这个
的东西。 TIA！
Are there methods for manipulating images in JavaScript that would allow me
to write functions to rotate, skew, mask and resize images (bitmaps)?
The functions need to be fast enough for use in a top-down scrolling game.
Or would I be better off preprocessing all of the images with something
server side such as PHP and then preloading them into my JavaScript already
manipulated?
The only thing I don''t like about the idea of preprocessing the images is
that I will have to preload a very large number of images, ie all of the
sprites rotated at different angles, resized at different sizes etc.
I am considering using Flash but because it would involve learning
ActionScript I would prefer to do it with a combination of JavaScript and
PHP. The other alternative that I was considering was using SVG, but not
many people have an SVG capable browser or have downloaded the SVG plugin.
Would also appreciate any links to resources that would help me with this
sort of thing. TIA!
这篇关于为DHTML游戏旋转，倾斜，调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
