如何在画布上的图像加载从JSON对象的图片? [英] How to load images from json object on canvas image?
本文介绍了如何在画布上的图像加载从JSON对象的图片?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
需要绘制alphaball.png图像在画布上的图像不同的位置。 位置(X和Y坐标),需要从数据JSON对象传递。 与code提alphaball.png是不可见的。可以做些什么?
// JSON对象
数据= [{
×:[200],
Y:200]
},{
×:[150],
Y:150]
},{
×:[300],
Y:300]
}
]。
在window.onload =功能(){
VAR帆布=的document.getElementById(myCanvas);
VAR上下文= canvas.getContext(2D);
VAR dataJSON =数据|| []
var中的文件= [gkhead.jpg,marker.png],
图像= [],
numOfFiles = files.length,
数= numOfFiles;
///功能加载所有图像一气呵成
功能loadImages(){
///通过文件名称的数组
对于(VAR I = 0; I< numOfFiles;我++){
///创建一个图像元素
VAR IMG = document.createElement方法('IMG');
///使用普通装载机,因为我们需要计算文件
img.onload = imageLoaded;
执行console.log(imageLoaded);
//img.onerror = ...处理错误
img.src =文件[I]
//console.log(img.src);
///推图像投影到阵列中的顺序相同的文件名
images.push(IMG);
//console.log(images);
}
}
loadImages();
功能imageLoaded(五){
///每一个成功的负荷,我们倒计时
计数 - ;
如果(计数=== 0)
开始(); //启动没事的时候多到数不清
}
函数的start(){
context.drawImage(图像[0],0,0,400 * scaleValue,400 * scaleValue);
对于(VAR I = 0,POS机,POS = dataJSON [我];我++){
///我们知道阿尔法球有指数1我们使用这里的图像
context.drawImage(图像[1],pos.x,pos.y,40 / scaleValue,40 / scaleValue);
}
}
功能DRAW1(scaleValue,dataJSON){
loadImages();
context.save();
context.setTransform(1,0,0,1,0,0)
context.globalAlpha = 0.5;
context.clearRect(0,0,canvas.width,canvas.height);
context.restore();
context.save();
context.drawImage(图像[0],0,0,400 * scaleValue,400 * scaleValue);
context.scale(scaleValue,scaleValue);
开始();
context.restore();
};
DRAW1(scaleValue,dataJSON);
变种scaleValue = 1;
VAR scaleMultiplier = 0.8;
变种startDragOffset = {};
VAR MOUSEDOWN = FALSE;
//添加按钮事件监听器
的document.getElementById(加)。的addEventListener(点击,函数(){
scaleValue / = scaleMultiplier;
DRAW1(scaleValue,dataJSON);
}, 假);
的document.getElementById(减)。的addEventListener(点击,函数(){
scaleValue * = scaleMultiplier;
DRAW1(scaleValue,dataJSON);
}, 假);
的document.getElementById(original_size)。的addEventListener(点击,函数(){
scaleValue = 1;
DRAW1(scaleValue,dataJSON);
}, 假);
解决方案
我不知道你为什么加载阿尔法球几次,但你可以收集文件加载到一个共同的地方:
///设置一些变量包含图像和计数
var中的文件= [gkhead.jpg,alphaball.png],
图像= [],
numOfFiles = files.length,
数= numOfFiles;
///功能加载所有图像一气呵成
功能loadImages(){
///通过文件名称的数组
对于(VAR I = 0; I< numOfFiles;我++){
///创建一个图像元素
VAR IMG = document.createElement方法('IMG');
///使用普通装载机,因为我们需要计算文件
img.onload = imageLoaded;
//img.onerror = ...处理错误
img.src =文件[I]
///推图像投影到阵列中的顺序相同的文件名
images.push(IMG);
}
}
功能imageLoaded(五){
///每一个成功的负荷,我们倒计时
计数 - ;
如果(计数=== 0)启动(); //启动没事的时候多到数不清
}
现在可以得出球:
函数start(){
对于(VAR I = 0,POS机,POS = dataJSON [我];我++){
///我们知道阿尔法球有指数1我们使用这里的图像
context.drawImage(图像[1],pos.x,pos.y,40 / scaleValue,40 / scaleValue);
}
}
Need to plot alphaball.png image on different positions on canvas image. Positions (x and y co-ordinates) need to pass from data json object. with the code mention alphaball.png is not visible. what can be done?
//JSON object
data = [{
"x": ["200"],
"y": ["200"]
}, {
"x": ["150"],
"y": ["150"]
}, {
"x": ["300"],
"y": ["300"]
}
];
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext('2d');
var dataJSON = data || []
var files = ["gkhead.jpg", "marker.png"],
images = [],
numOfFiles = files.length,
count = numOfFiles;
/// function to load all images in one go
function loadImages() {
/// go through array of file names
for(var i = 0; i < numOfFiles; i++) {
/// create an image element
var img = document.createElement('img');
/// use common loader as we need to count files
img.onload = imageLoaded;
console.log(imageLoaded);
//img.onerror = ... handle errors
img.src = files[i];
//console.log(img.src);
/// push image onto array in the same order as file names
images.push(img);
//console.log(images);
}
}
loadImages();
function imageLoaded(e) {
/// for each successful load we count down
count--;
if (count === 0)
start(); //start when nothing more to count
}
function start() {
context.drawImage(images[0], 0, 0, 400*scaleValue, 400*scaleValue);
for(var i = 0, pos; pos = dataJSON[i]; i++) {
/// as we know the alpha ball has index 1 we use that here for images
context.drawImage(images[1], pos.x, pos.y, 40/scaleValue, 40/scaleValue);
}
}
function draw1(scaleValue, dataJSON){
loadImages();
context.save();
context.setTransform(1,0,0,1,0,0)
context.globalAlpha = 0.5;
context.clearRect(0, 0, canvas.width, canvas.height);
context.restore();
context.save();
context.drawImage(images[0], 0, 0, 400*scaleValue, 400*scaleValue);
context.scale(scaleValue, scaleValue);
start();
context.restore();
};
draw1(scaleValue, dataJSON);
var scaleValue = 1;
var scaleMultiplier = 0.8;
var startDragOffset = {};
var mouseDown = false;
// add button event listeners
document.getElementById("plus").addEventListener("click", function(){
scaleValue /= scaleMultiplier;
draw1(scaleValue, dataJSON);
}, false);
document.getElementById("minus").addEventListener("click", function(){
scaleValue *= scaleMultiplier;
draw1(scaleValue, dataJSON);
}, false);
document.getElementById("original_size").addEventListener("click", function(){
scaleValue = 1;
draw1(scaleValue, dataJSON);
}, false);
解决方案
I am not sure why you load the alpha ball several times, but you can collect the file loading into a common place:
/// set up some variables to contain images and count
var files = ["gkhead.jpg", "alphaball.png"],
images = [],
numOfFiles = files.length,
count = numOfFiles;
/// function to load all images in one go
function loadImages() {
/// go through array of file names
for(var i = 0; i < numOfFiles; i++) {
/// create an image element
var img = document.createElement('img');
/// use common loader as we need to count files
img.onload = imageLoaded;
//img.onerror = ... handle errors
img.src = files[i];
/// push image onto array in the same order as file names
images.push(img);
}
}
function imageLoaded(e) {
/// for each successful load we count down
count--;
if (count === 0) start(); //start when nothing more to count
}
Now you can draw the balls:
function start() {
for(var i = 0, pos; pos = dataJSON[i]; i++) {
/// as we know the alpha ball has index 1 we use that here for images
context.drawImage(images[1], pos.x, pos.y, 40/scaleValue, 40/scaleValue);
}
}
这篇关于如何在画布上的图像加载从JSON对象的图片?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文