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

pangolin · 20 грудня 2013

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

http://yadi.sk/d/DeaSggGmEe5GR

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

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

pangolin · 20 грудня 2013

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

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

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

magneto2010 · 20 грудня 2013

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

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

pangolin · 21 грудня 2013

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

я изменил шрифт, цвет. всё норм получилось. красиво. но на хостинге почему-то сам скрипт не гурзит. 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 · 21 грудня 2013

ещё не решено

pangolin · 21 грудня 2013

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

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

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

Вхід

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

Recommended Posts

pangolin

Надіслати

Поділитися на інших сайтах

pangolin

Надіслати

Поділитися на інших сайтах

magneto2010

Надіслати

Поділитися на інших сайтах

pangolin

Надіслати

Поділитися на інших сайтах

pangolin

Надіслати

Поділитися на інших сайтах

pangolin

Надіслати

Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Створити обліковий запис

Вхід

Зараз на сторінці 0 користувачів

Покупцям

Розробникам

Корисна інформація

Останні розширення

Ваші замовлення

ocStore

Шаблони

OpenCart.Pro

Important Information