解析PIXI.js中镜像的访问控制允许原点
解析PIXI.js中镜像的访问控制允许原点
提问于 2018-08-18 23:05:27
我尝试在本地环境中使用pixi.js在画布上工作。但是，当我想要处理任何图像时，我会收到“access-control-allow-control”错误消息。
在我的领域中，它工作得很好：https://guillaumeduclos.fr/ripple-effect
我在本地有这样一条消息：
在我的代码中，当我加载图片时，我放入了crossOrigin：‘’行，但它不再工作。
我的代码：
<!DOCTYPE html>
<html>
<head>
<title>PixiJS Ripple</title>
<script src="pixi.js"></script>
</head>
<body>
<script>
var stage = new PIXI.Container();
var renderer = PIXI.autoDetectRenderer(512, 512);
document.body.appendChild(renderer.view);
// load assets
PIXI.loader
.add([{
name: "bg",
url: "https://guillaumeduclos.fr/ripple-effect/background.jpeg",
crossOrigin: ''
}])
.add([{
name: "map",
url: "https://guillaumeduclos.fr/ripple-effect/map.png",
crossOrigin: ''
}])
.load(setup);
var ripples = [];
function setup() {
// background
var bg = new PIXI.Sprite(PIXI.loader.resources.bg.texture);
bg.anchor.set(0.5);
bg.scale.set(0.6);
bg.position.set(renderer.view.width/2, renderer.view.height/2);
stage.addChild(bg);
// add new ripple each time mouse is clicked
renderer.view.addEventListener('mousedown', function(ev) {
ripples.push(new Ripple(ev.clientX, ev.clientY));
stage.filters = ripples.map(function(f) { return f.filter; });
}, false);
gameLoop();
}
function gameLoop() {
requestAnimationFrame(gameLoop);
// update ripples
for(var i=0; i<ripples.length; i++) {
ripples[i].update();
}
renderer.render(stage);
}
function Ripple(x, y) {
// sprite
this.sprite = new PIXI.Sprite(PIXI.loader.resources.map.texture);
this.sprite.anchor.set(0.5);
this.sprite.position.set(x, y);
this.sprite.scale.set(0.1);
stage.addChild(this.sprite);
// filter
this.filter = new PIXI.filters.DisplacementFilter(this.sprite);
}
Ripple.prototype.update = function() {
this.sprite.scale.x += 0.025;
this.sprite.scale.y += 0.025;
}
</script>我不知道我还能做些什么来解决这个问题？谢谢你的帮助。
回答 1
Stack Overflow用户
发布于 2018-08-18 23:16:41
只有在使用http服务器时，才能发出ajax请求(这正是pixijs正在尝试做的事情)。它不能只与html文件一起工作，这就是为什么它在你的域名上工作。因此，您需要一个本地服务器来进行测试。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51909942
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号