pangolin

[Решено] Помогите подправить css

Рекомендуемые сообщения

pangolin    3

Понравился один скриптик, который пишет цитаты на готовом фоне, подобие демативатора. я поставил свой фон а он заточен под другой и цитату выводит не так где мне надо. 

http://yadi.sk/d/DeaSggGmEe5GR

я так понял то что мне надо кроется в файле css/bootstrap.min.css какой параметр отвечает за позицию текста? 

помогите пожалуйста, а то я методом тыка не нашёл. 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
pangolin    3

сначала подумал что нашёл. в скрипте. но оказывается нет. 

function draw(text, auth)
	{	
		ctx.drawImage(sprite, 0, 0);	//Рисую спрайт
		var maxWidth = 550; //максимальная длина строки в px
		var lineHeight = 25; //максимальная высота строки, нужна для определения положения текста
		var marginTop = 200; 
		/*если мы знаем высоту текста, то мы можем
		предположить, что высота строки должна быть именно такой*/
		var marginLeft = 590;

меняет но не так как мне надо. он по правой стороне, а мне надо по левой. 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
magneto2010    38

var marginLeft = 590; => var marginRight = число;

 

попробуйте исправить включите фантазию 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
pangolin    3

Спасибо помогло. 

я изменил шрифт, цвет. всё норм получилось. красиво. но на хостинге почему-то сам скрипт не гурзит. http://zavarri.ru/card/

$(document).ready(function() {


	
	var canvas = document.getElementById('fon');  //Определяю canvas
	var ctx = canvas.getContext('2d'); //Определяю контехт canvas
	var sprite = new Image(); 
	sprite.src = 'img/sprite.png'; //Определяю спрайт
	sprite.onload=function(e){ctx.drawImage(sprite, 0, 0);}; //Сразу рисую пустой спрайт
	
	function draw(text, auth)
	
	{	
		ctx.drawImage(sprite, 0, 0);	//Рисую спрайт
		var maxWidth = 550; //максимальная длина строки в px
		var lineHeight = 25; //максимальная высота строки, нужна для определения положения текста
		var marginTop = 100; /*если мы знаем высоту текста, то мы можем
		предположить, что высота строки должна быть именно такой*/
		var marginleft = 10;
		
		ctx.font = "italic 30px Monotype Corsiva";
		ctx.fillStyle = "#cecece";
		ctx.textAlign = "left";
		ctx.textBaseline = "middle";
	
		var words = text.split(" ");
		var countWords = words.length;
		var line = "";
		
		// разделяем текст на строки
		var l = text.split ("\n");
		var lines = new Array();
		var k=0;
		
		// каждую строку делим еще на строчки по длине
		for (var c=0;c<l.length;c++) {
			var words = l[c].split(" ");
			var countWords = words.length;
			var line = "";

			// перебираем все слова и составляем из них строки
			for (var n = 0; n < countWords; n++) {
				var testLine = line + words[n] + " ";
				var testWidth = ctx.measureText(testLine).width;
				if (testWidth > maxWidth) {
					lines[k] = line;
					k++;
					line = words[n] + " ";
				}	
				else {
					line = testLine;
				}
			}
			lines[k] = line;
			k++;
		}
		
	// Проверяем, не вылезли ли мы за границы
		if (k>8) {
			alert("Слишком много строчек!"); exit;
		}
		
	//Считаем, на сколько надо отступить от середины, чтобы весь текст был по центру	
		marginTop = 120 - (lineHeight) * (k/2);
		
	// Теперь печатаем текст

		for (var n=0; n<(k); n++) {
			ctx.fillText(lines[n], marginleft, marginTop);
			marginTop += lineHeight;
		}
	
	// Печатаем автора
		ctx.font = "italic 15pt Monotype Corsiva";
		ctx.fillStyle = "#FFFFF";
		ctx.textAlign = "left";
		ctx.textBaseline = "middle";
		ctx.fillText(auth, marginleft, 330);
	}
	
	$('#writeIt').click(function(){
		phrase = document.forms.inputForm.elements.inputPhrase.value;
		author = " © " + document.forms.inputForm.elements.inputAuthor.value + " FarmMedia";
		draw(phrase, author);
	});
	
	$('#cancel').click(function(){
		ctx.drawImage(sprite, 0, 0);
	});

	$('#downloadIt').click(function(){
            var form = '<form id="canvas_form" action="process.php"  method="post">'+
                        '<input type="hidden" name="imageData" value="' + canvas.toDataURL("image/png") + '" />'+
                        '</form>';
            $("#saveimage").html(form);
            document.forms["canvas_form"].submit();
	});
});

открывает его через html 

<head>
		<title>FarmMedia</title>
		<head>
		<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
		<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
		<link href="css/style.css" rel="stylesheet" media="screen">
		<script src="../../code.jquery.com/jquery-latest.js"></script>
		<script src="js/bootstrap.min.js"></script>
	</head>
	<body>
	<div id="container" class="hero-unit">
		<h1>FarmMedia</h1>
		
		
		
		<canvas id='fon' width='600px' height='400px'></canvas>
		
		<hr>
		
                <form id='inputForm' name='form1'>
			<textarea cols="40" rows="5" id='inputPhrase' class="input-xxlarge" maxlength='320' autofocus placeholder='Сюда цитата!'></textarea>
			<br/>
			<input id='inputAuthor' type='text' maxlength='40' autocomplete='off' placeholder='Сюда автор!'><br/>
			<input id='writeIt' class="btn btn-large btn-primary" type='button' value='Написать' title= 'Сгенерировать цитату'>
			<input id='downloadIt' class="btn btn-large btn-warning" type='button' value='Скачать' title='Сохранить картинку'>
			<input id='cancel' class="btn btn-large btn-danger" type='button' value='Сбросить' title= 'Сбросить'><br/>
		</form>
		
                <div id="saveimage"></div>
                
	</div><script src="js/gen.js"></script>
	</body>


</html>

и на локалке ещё не работет последняя часть скрипта "скачать" в этом скрипте он ссылается на файл process.php вот что пишет автор на сайте 

 

 

Сохранение картинки
Для сохранения картинки я воспользовался toDataURL('image/png'). Просто открываю новое окно с url canvas.toDataURL('image/png')
document.getElementById('downloadIt').onclick=function(e){
ctx.drawImage(sprite, 9, 250, 142, 25, 17, 222, 142, 25); //Рисую копирайт
window.open(canvas.toDataURL("image/png"), "Скачать Bart's Chalkoard", "resizable=no,toolbar=no,menubar=no,location=no,scrollbars=no,status=no,width=530,height=340, left=400, top=120,");    //Задаю параметры всплывающего окна.
ctx.drawImage(sprite, 16, 226, 134, 18, 16, 226, 134, 18); //Затираю копирайт кусочком доски
};

я не понял что к чему. но пока главное это почему на хосте не заработало? 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
pangolin    3

С отображением скрипта разобрался. 

http://farmmedia.zavarri.ru/card/

кнопка "скачать не работает" не знаю какое должно быть содержимое файла process.php

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти


  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу