如何从画布图像上的 json 对象加载图像? [英] How to load images from json object on canvas image?
本文介绍了如何从画布图像上的 json 对象加载图像?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
需要在画布图像的不同位置绘制 alphaball.png 图像.位置(x 和 y 坐标)需要从数据 json 对象传递.代码中提到 alphaball.png 是不可见的.可以做什么?
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 对象
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);
推荐答案
我不知道你为什么多次加载 alpha 球,但是你可以将加载的文件收集到一个公共的地方:
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
}
现在你可以画球了:
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屋!
查看全文