Форум

kat_lev · #1 (**permalink**) 02.03.2013, 20:16

При загрузке страницы на канве рисуется фигура и ее можно всячески модифицировать. Надо сделать так, чтобы фигура появлялась при нажатии на кнопку. Рисую на canvas. Использую событие onclick:
<input type="button" value="Blob" onClick="createBlob(center, maxRadius, points)" > , но ничего не происходит

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="lib/paper.js" type="text/javascript" charset="utf-8"></script>
<script type="text/paperscript"  canvas="canvas-1">
var values = {
	paths: 1, // всего фигур
	minPoints: 5, // минимум точек на фигуре
	maxPoints: 5, // макс тосек на фигуре
	minRadius: 40,
	maxRadius: 50
};

var hitOptions = {
	segments: true,
	stroke: true, // чтобы можно было менять фигуру по точкам
	fill: true, // сдвинуть фигуру с места
	tolerance: 5 // насколько алгоритм может отойти от первонач-го пути
};

var radiusDelta = values.maxRadius - values.minRadius;
var pointsDelta = values.maxPoints - values.minPoints;
for (var i = 0; i < values.paths; i++) {
	var radius = values.minRadius + Math.random() * radiusDelta;
	var points = values.minPoints + Math.floor(Math.random() * pointsDelta);
	var path = createBlob(view.size * 0.5, radius, points); // creates a blob on a one place
	var lightness = 0.5;
	var hue = 0.56 * 360; // задает цвет фигуры
	path.style = {
		fillColor: new HslColor(hue, 0.5, lightness), //design blob
		strokeColor: path.hue
	};
};
		// creates a blob 
function createBlob(center, maxRadius, points) { 
	var path = new Path(); // constructor
	path.closed = true; // connects the first and last segments
	for (var i = 0; i < points; i++) {
		var delta = new Point({
			length: (maxRadius * 0.5) + (Math.random() * maxRadius * 0.5),
			angle: (360 / points) * i
		});
		path.add(center + delta);
	}
	path.smooth();
	return path;
}

var segment, path;
var movePath = false;
function onMouseDown(event) {
	segment = path = null;
	var hitResult = project.hitTest(event.point, hitOptions);

	if (event.modifiers.shift) {
		if (hitResult.type == 'segment') {
			hitResult.segment.remove();
		};
		return;
	}

	if (hitResult) {
		path = hitResult.item;
		if (hitResult.type == 'segment') {
			segment = hitResult.segment;
		} else if (hitResult.type == 'stroke') {
			var location = hitResult.location;
			segment = path.insert(location.index + 1, event.point);
			path.smooth();
		}
	}
	movePath = hitResult.type == 'fill';
	if (movePath)
		project.activeLayer.addChild(hitResult.item);
}

function onMouseMove(event) {
	var hitResult = project.hitTest(event.point, hitOptions);
	project.activeLayer.selected = false;
	if (hitResult && hitResult.item)
		hitResult.item.selected = true;
}

function onMouseDrag(event) {
	if (segment) {
		segment.point = event.point;
		path.smooth();
	}

	if (movePath)
		path.position += event.delta;
}</script>
</head>
<!-- Определяет имя класса, которое позволяет связать тег со стилевым оформлением-->
<body class="fullscreen"> 
<input type="button" value="Blob" onClick="createBlob(center, maxRadius, points)" >
<div class="canvas"><canvas resize="true" id="canvas-1" style="background:white"></canvas></div>
</body>
</html>

danik.js · #2 (**permalink**) 03.03.2013, 03:38

Сообщение от kat_lev

onClick="createBlob(center, maxRadius, points)"

А где объявлены эти переменные (center, maxRadius, points) и что в них содержится?

kat_lev · #3 (**permalink**) 03.03.2013, 12:53

danik.js,
они объявлены в самом скрипте и они используются при создании фигуры (макс радиус, центр фигуры и количество точек на фигуре(с помощью них фигурой можно манипулировать))
в коде это 25,26,36-48 строки

danik.js · #4 (**permalink**) 03.03.2013, 13:34

Я вижу где они используются. Но где объявлены, и где им задаются значения - нет. Выдает undefined (не определено)

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="lib/paper.js" type="text/javascript" charset="utf-8"></script>
<script type="text/paperscript"  canvas="canvas-1">
var values = {
    paths: 1, // всего фигур
    minPoints: 5, // минимум точек на фигуре
    maxPoints: 5, // макс тосек на фигуре
    minRadius: 40,
    maxRadius: 50
};
 
var hitOptions = {
    segments: true,
    stroke: true, // чтобы можно было менять фигуру по точкам
    fill: true, // сдвинуть фигуру с места
    tolerance: 5 // насколько алгоритм может отойти от первонач-го пути
};
 
var radiusDelta = values.maxRadius - values.minRadius;
var pointsDelta = values.maxPoints - values.minPoints;
for (var i = 0; i < values.paths; i++) {
    var radius = values.minRadius + Math.random() * radiusDelta;
    var points = values.minPoints + Math.floor(Math.random() * pointsDelta);
    var path = createBlob(view.size * 0.5, radius, points); // creates a blob on a one place
    var lightness = 0.5;
    var hue = 0.56 * 360; // задает цвет фигуры
    path.style = {
        fillColor: new HslColor(hue, 0.5, lightness), //design blob
        strokeColor: path.hue
    };
};
        // creates a blob
function createBlob(center, maxRadius, points) {
    var path = new Path(); // constructor
    path.closed = true; // connects the first and last segments
    for (var i = 0; i < points; i++) {
        var delta = new Point({
            length: (maxRadius * 0.5) + (Math.random() * maxRadius * 0.5),
            angle: (360 / points) * i
        });
        path.add(center + delta);
    }
    path.smooth();
    return path;
}
 
var segment, path;
var movePath = false;
function onMouseDown(event) {
    segment = path = null;
    var hitResult = project.hitTest(event.point, hitOptions);
 
    if (event.modifiers.shift) {
        if (hitResult.type == 'segment') {
            hitResult.segment.remove();
        };
        return;
    }
 
    if (hitResult) {
        path = hitResult.item;
        if (hitResult.type == 'segment') {
            segment = hitResult.segment;
        } else if (hitResult.type == 'stroke') {
            var location = hitResult.location;
            segment = path.insert(location.index + 1, event.point);
            path.smooth();
        }
    }
    movePath = hitResult.type == 'fill';
    if (movePath)
        project.activeLayer.addChild(hitResult.item);
}
 
function onMouseMove(event) {
    var hitResult = project.hitTest(event.point, hitOptions);
    project.activeLayer.selected = false;
    if (hitResult && hitResult.item)
        hitResult.item.selected = true;
}
 
function onMouseDrag(event) {
    if (segment) {
        segment.point = event.point;
        path.smooth();
    }
 
    if (movePath)
        path.position += event.delta;
}</script>
</head>
<!-- Определяет имя класса, которое позволяет связать тег со стилевым оформлением-->
<body class="fullscreen">
<input type="button" value="Blob" onClick="alert(typeof center); alert(typeof maxRadius);alert(typeof points);createBlob(center, maxRadius, points)" >
<div class="canvas"><canvas resize="true" id="canvas-1" style="background:white"></canvas></div>
</body>
</html>

kat_lev · #5 (**permalink**) 03.03.2013, 13:48

danik.js,
maxRadius 12 строчка кода
points 26 строчка (points считается с помощью minPoints и pointsDelta (9 и 23 строки соотв-но))
а center я даже не знаю...но я тут использую библиотеку paper.js и там есть center,может оттуда берется значение?

danik.js · #6 (**permalink**) 03.03.2013, 13:54

У меня одного при клике по Blob выскакивает UNDEFINED ???

kat_lev · #7 (**permalink**) 03.03.2013, 13:55

danik.js,
у меня тоже

danik.js · #8 (**permalink**) 03.03.2013, 14:08

Вы ссылаетесь на код в скрипте text/paperscript. Браузер не выполняет скрипт такого типа. Так что я бы не надеялся что все переменные будут объявлены в глобале.
Кроме того, функция createBlob также не глобальная.

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://paperjs.org/static/js/paper.js?1320949252000" type="text/javascript" charset="utf-8"></script>
<script type="text/paperscript"  canvas="canvas-1">
var values = {
    paths: 1, // всего фигур
    minPoints: 5, // минимум точек на фигуре
    maxPoints: 5, // макс тосек на фигуре
    minRadius: 40,
    maxRadius: 50
};
 
var hitOptions = {
    segments: true,
    stroke: true, // чтобы можно было менять фигуру по точкам
    fill: true, // сдвинуть фигуру с места
    tolerance: 5 // насколько алгоритм может отойти от первонач-го пути
};
 
var radiusDelta = values.maxRadius - values.minRadius;
var pointsDelta = values.maxPoints - values.minPoints;
for (var i = 0; i < values.paths; i++) {
    var radius = values.minRadius + Math.random() * radiusDelta;
    var points = values.minPoints + Math.floor(Math.random() * pointsDelta);
    var path = createBlob(view.size * 0.5, radius, points); // creates a blob on a one place
    var lightness = 0.5;
    var hue = 0.56 * 360; // задает цвет фигуры
    path.style = {
        fillColor: new HslColor(hue, 0.5, lightness), //design blob
        strokeColor: path.hue
    };
};
        // creates a blob
function createBlob (center, maxRadius, points) {
    var path = new Path(); // constructor
    path.closed = true; // connects the first and last segments
    for (var i = 0; i < points; i++) {
        var delta = new Point({
            length: (maxRadius * 0.5) + (Math.random() * maxRadius * 0.5),
            angle: (360 / points) * i
        });
        path.add(center + delta);
    }
    path.smooth();
    return path;
}
 
var segment, path;
var movePath = false;
function onMouseDown(event) {
    segment = path = null;
    var hitResult = project.hitTest(event.point, hitOptions);
 
    if (event.modifiers.shift) {
        if (hitResult.type == 'segment') {
            hitResult.segment.remove();
        };
        return;
    }
 
    if (hitResult) {
        path = hitResult.item;
        if (hitResult.type == 'segment') {
            segment = hitResult.segment;
        } else if (hitResult.type == 'stroke') {
            var location = hitResult.location;
            segment = path.insert(location.index + 1, event.point);
            path.smooth();
        }
    }
    movePath = hitResult.type == 'fill';
    if (movePath)
        project.activeLayer.addChild(hitResult.item);
}
 
function onMouseMove(event) {
    var hitResult = project.hitTest(event.point, hitOptions);
    project.activeLayer.selected = false;
    if (hitResult && hitResult.item)
        hitResult.item.selected = true;
}
 
function onMouseDrag(event) {
    if (segment) {
        segment.point = event.point;
        path.smooth();
    }
 
    if (movePath)
        path.position += event.delta;
}</script>
</head>
<!-- Определяет имя класса, которое позволяет связать тег со стилевым оформлением-->
<body class="fullscreen">
<input type="button" value="Blob" onClick="alert(typeof center); alert(typeof maxRadius);alert(typeof points);alert(typeof createBlob)" >
<div class="canvas"><canvas resize="true" id="canvas-1" style="background:white"></canvas></div>
</body>
</html>

kat_lev · #9 (**permalink**) 03.03.2013, 14:16

danik.js,
т. е. надо переделывать весь blob.js?

danik.js · #10 (**permalink**) 03.03.2013, 14:21

Нужно просто прочитать документацию.

Форум

Справочник

Discord чат

Курсы javascript