Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.02.2014, 02:58
Аспирант
Отправить личное сообщение для BratKilla Посмотреть профиль Найти все сообщения от BratKilla
 
Регистрация: 26.02.2014
Сообщений: 30

Определение площади нарисованного Canvas пространства
Всем привет! Если кто в курсе, подскажите пожалуйста, как определить занятую площадь от всего пространства canvas? Например если у меня три квадрата разбросаны по области, можно одного цвета. Можно в процентах от общей площади canvas, можно просто в пикселях, может быть по области заливки, или же конкретного цвета? Как нибудь нужно определить использованное пространство...
Ответить с цитированием
  #2 (permalink)  
Старый 26.02.2014, 03:18
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,584

Вручную посчитать соотношение пикселей через .getImageData() .)
__________________
29375, 35
Ответить с цитированием
  #3 (permalink)  
Старый 26.02.2014, 03:40
Аспирант
Отправить личное сообщение для BratKilla Посмотреть профиль Найти все сообщения от BratKilla
 
Регистрация: 26.02.2014
Сообщений: 30

Сообщение от Aetae Посмотреть сообщение
Вручную посчитать соотношение пикселей через .getImageData() .)
можно, но если область canvas будет 500px*500px, не велика ли нагрузка на процессор создания 1.000.000 значений одного массива в одном цикле, и проверки 750.000 значений (прозрачность не учитываем) на неравенство нулю?
Ответить с цитированием
  #4 (permalink)  
Старый 26.02.2014, 04:45
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,584

Сообщение от BratKilla Посмотреть сообщение
можно, но если область canvas будет 500px*500px, не велика ли нагрузка на процессор создания 1.000.000 значений одного массива в одном цикле, и проверки 750.000 значений (прозрачность не учитываем) на неравенство нулю?
ImageData это не просто массив, а typedArray т.е. оперирующий низкоуровневыми значениями, так что всё должно быть относительно быстро. Пример:
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<script type="text/javascript">
window.onload = function(){
	var canvas = document.createElement('canvas');
	canvas.width = window.innerWidth - 20;
	canvas.height = window.innerHeight - 20;
	
	var div = document.createElement('div');
	
	var ctx = canvas.getContext("2d"),
		length = canvas.width * canvas.height,
		drawing = false, x, y;
		
		
		
	function showPercentage(){
		var data = new Int32Array( ctx.getImageData(0,0,canvas.width,canvas.height).data.buffer );
		for(var i = length, j = 0; i; i--) if( data[i] !== 0) j++;
		div.innerHTML = 'Закрашено ' + (j / length * 100).toFixed(2)  + '% (' + j + 'px)';
	}
	
	canvas.onmousedown = function(e){
		ctx.beginPath();
		ctx.strokeStyle = '#000000';
		ctx.lineWidth = 1;
		ctx.moveTo(e.clientX, e.clientY);
		
		drawing = true;
	}
	
	canvas.onmouseup = function(e){
		if (drawing) {	
			ctx.lineTo(e.clientX, e.clientY);	
			
			showPercentage();
			
			drawing = false;
		}
	}
	
	canvas.onmousemove = function(e){
		if (drawing) {	
			ctx.lineTo(x = e.clientX, y = e.clientY);
			ctx.stroke();
			ctx.moveTo(x, y);
		}
	}
	
	document.body.appendChild(canvas);
	document.body.appendChild(div);
}
</script>
<style>
	*{margin:0;padding:0}
	html,body{
		width:100%;
		height:100%;
	}
	canvas {
		cursor:crosshair;
	}
	div {
		position: absolute;
		top: 0px;
		left: 0px;
		cursor: default;
		font-size:18pt;
	}
</style>
</head>
<body>
</body>
</html>
__________________
29375, 35

Последний раз редактировалось Aetae, 26.02.2014 в 04:56.
Ответить с цитированием
  #5 (permalink)  
Старый 26.02.2014, 05:06
Аспирант
Отправить личное сообщение для BratKilla Посмотреть профиль Найти все сообщения от BratKilla
 
Регистрация: 26.02.2014
Сообщений: 30

спасибо Aetae! буду пользоваться, думаю вопрос исчерпан, дополнительное спасибо за оперативность и наглядный пример!
Ответить с цитированием
  #6 (permalink)  
Старый 26.02.2014, 07:15
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Научное название - гистограмма.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
определение вершины трапеции canvas imediasun1 Элементы интерфейса 1 17.01.2014 23:47