Javascript 在arbor.js中使用图像的性能问题
我一直在修改arbor.js以使用图像 然而,作为一个相对的JS noob,我所拥有的是完全不被优化的 据我所知,我设置它的方式是为每个图像和每个帧重新创建图像对象,导致大量闪烁 有人能建议一种方法将新Image()内容从redraw函数移到初始化中吗?据我所知,这是一个基本的OOP问题,但完全卡住了 谢谢 我在输出脚本中的位置Javascript 在arbor.js中使用图像的性能问题,javascript,jquery,oop,arbor.js,Javascript,Jquery,Oop,Arbor.js,我一直在修改arbor.js以使用图像 然而,作为一个相对的JS noob,我所拥有的是完全不被优化的 据我所知,我设置它的方式是为每个图像和每个帧重新创建图像对象,导致大量闪烁 有人能建议一种方法将新Image()内容从redraw函数移到初始化中吗?据我所知,这是一个基本的OOP问题,但完全卡住了 谢谢 我在输出脚本中的位置 .非常抱歉!有几个步骤。我将重点介绍关键阶段,其余部分来自教程 首先,将相关信息添加到JSON中,例如: nodes:{ innovation:{ 'co
.非常抱歉!有几个步骤。我将重点介绍关键阶段,其余部分来自教程 首先,将相关信息添加到JSON中,例如:
nodes:{
innovation:{ 'color':colour.darkblue,
'shape':'dot',
'radius':30,
'image': 'innovation.png',
'image_w':130,
'image_h':24,
'alpha':1 },
participation:{ 'color':colour.purple,
'shape':'dot',
'radius':40,
'image':'participation.png',
'image_w':130,
'image_h':24,
'alpha':1 },
...
加载对象时缓存所有图像
init:function(system){
// Normal initialisation
particleSystem = system
particleSystem.screenSize(canvas.width, canvas.height)
particleSystem.screenPadding(25, 50)
that.initMouseHandling()
// Preload all images into the node object
particleSystem.eachNode(function(node, pt) {
if(node.data.image) {
node.data.imageob = new Image()
node.data.imageob.src = imagepath + node.data.image
}
})
...
然后,为了移动图像本身
particleSystem.eachNode(function(node, pt){
...
// Image info from JSON
var imageob = node.data.imageob
var imageH = node.data.image_h
var imageW = node.data.image_w
...
// Draw the object
if (node.data.shape=='dot'){
// Check if it's a dot
gfx.oval(pt.x-w/2, pt.y-w/2, w,w, {fill:ctx.fillStyle, alpha:node.data.alpha})
nodeBoxes[node.name] = [pt.x-w/2, pt.y-w/2, w,w]
// Does it have an image?
if (imageob){
// Images are drawn from cache
ctx.drawImage(imageob, pt.x-(imageW/2), pt.y+radius/2, imageW, imageH)
}
}else {
// If none of the above, draw a rectangle
gfx.rect(pt.x-w/2, pt.y-10, w,20, 4, {fill:ctx.fillStyle, alpha:node.data.alpha})
nodeBoxes[node.name] = [pt.x-w/2, pt.y-11, w, 22]
}
...
哈终于解决了这个问题。如果您想查看我是如何在URL上执行此操作的,请使用新代码。我是否可以建议添加您的修复作为问题的答案(并接受该答案),以便该问题不会显示为未回答?:)我正要说“没有闪烁”,直到我读到评论。请添加您自己关于如何解决问题的答案。@kimadactyl:在下面自己发布一个答案,并将其标记为正确。抱歉,暂时不要登录这里!回答补充道,我希望它足够清楚。