我正在使用 PanoJS 创建一个可以查看和修改巨大图像的平台。
我需要做的是用 canvas 渲染多个 图像切片
,并且能改变图像的亮度,对比度,不透明度。
但问题是,当我运行这个 updateTiles
函数时,切片
没有被逐个更新,它们会等待所有的 tiles 被更新以后一起渲染,图像大了以后要卡住好几秒,一开始设置的 loading 透明度也在所有切片都更新以后才会生效。
希望有了解这方面的大神指点一下,多谢!
...
PanoJS.prototype.updateTiles = function () {
const handleCanvasUpdate = (element) => {
const ctx = element.getContext('2d')
const imgData = new ImageData(new Uint8ClampedArray(JSON.parse(element._imgData.data)), element._imgData.height, element._imgData.width)
const changedImgData = this.changeImgData(imgData) // -1 ~ 1
ctx.putImageData(changedImgData, 0, 0);
}
const tag = this.showLoading('updateTiles')
for (let i = 0; i < this.well.children.length; i++) {
const element = this.well.children[i];
if (element.tagName.toUpperCase() === 'CANVAS') {
handleCanvasUpdate(element)
}
}
this.hideLoading(tag)
}
PanoJS.prototype.changeImgData = function (imgdata) {
// this imgdata can be very large
const data = imgdata.data;
for (let i = 0; i < data.length; i += 4) {
// brightness
const hsv = this.rgb2hsv([data[i], data[i + 1], data[i + 2]]);
hsv[2] *= 1 + this.luminance;
const rgb = this.hsv2rgb([...hsv]);
data[i] = rgb[0];
data[i + 1] = rgb[1];
data[i + 2] = rgb[2];
// contrast
const _contrast = (this.contrast / 100) + 1; //convert to decimal & shift range: [0..2]
const intercept = 128 * (1 - _contrast);
data[i] = data[i] * _contrast + intercept;
data[i + 1] = data[i + 1] * _contrast + intercept;
data[i + 2] = data[i + 2] * _contrast + intercept;
// opacity
data[i + 3] = data[i + 3] * this.opacity;
}
return imgdata;
}
PanoJS.prototype.showLoading = function (name) {
counter++
const tag = `${counter}${name}`
console.time(tag)
this.loadingMask.style.opacity = 1
this.loadingCount++
return tag
}
PanoJS.prototype.hideLoading = function (tag) {
// requestAnimationFrame(() => {
if (this.loadingCount) {
this.loadingCount--
}
// console.log(this.loadingMask.style.opacity);
if (this.loadingCount === 0) {
this.loadingMask.style.opacity = 0
}
console.timeEnd(tag)
// console.log(this.loadingCount);
// })
}
...
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.