Canvas зеркально отражение!
Всем привет!:victory:
Наткнулся на одну проблемку. Есть изображения которые используються несколько раз, однако их нужно зеркально отразить по горизонтали! Как это сделать на Canvas'e??? |
Вот ссылка на вертикальное отражение
http://www.digitalia.be/file_download/14/reflection-jquery.zip подключается <img src="test.jpg" alt="" class="reflect" /> затем
$("#gallery img").reflect();
тоже самое но с параметрами
$('#gallery img').reflect({height:0.4, opacity:0.75}); // высота 40%, непрозрачность 0.75
думаю переписать труда не составит. На горизонтальное отражение переделать дело 5-15 минут. |
А средствами канвас как я понимаю, это не возможно? :)
|
Цитата:
|
Цитата:
|
|
|
горизонтальное отражение
var razmer=parseInt(elem_kanva.width/2)
var cnvobj=document.getElementById(elem_kanva.name_can);
var ctx=cnvobj.getContext("2d");
for (i=0;i<=razmer;i++)
{
imgd = ctx.getImageData(i,0, 1, elem_kanva.height);
imgd1 = ctx.getImageData((elem_kanva.width-i),0, 1, elem_kanva.height);
ctx.putImageData(imgd, (elem_kanva.width-i), 0);
ctx.putImageData(imgd1, i, 0);
}
вертикальное отражение
var razmer=parseInt(elem_kanva.height/2);
var cnvobj=document.getElementById(elem_kanva.name_can);
var ctx=cnvobj.getContext("2d");
for (i=0;i<=razmer;i++)
{
imgd = ctx.getImageData(0,i, elem_kanva.width, 1);
imgd1 = ctx.getImageData(0,(elem_kanva.height-i), elem_kanva.width, 1);
ctx.putImageData(imgd, 0, (elem_kanva.height-i));
ctx.putImageData(imgd1, 0, i);
}
|
всем спасибо! буду пробывать!!! :)
|
Выпил кофе и из любопытства переделал плагин. Правда под IE непеределывал. Но в остальных нормуль
/*!
reflection.js for jQuery v1.1
(c) 2006-2011 Christophe Beyls <http://www.digitalia.be>
MIT-style license.
*/
(function($) {
$.fn.extend({
reflect: function(options) {
options = $.extend({
height: 1/3,
opacity: 0.5
}, options);
return this.unreflect().each(function() {
var img = this;
if (/^img$/i.test(img.tagName)) {
function doReflect() {
var imageWidth = img.width, imageHeight = img.height, reflection, reflectionHeight, wrapper, context, gradient;
reflectionHeight = Math.floor((options.height > 1) ? Math.min(imageHeight, options.height) : imageHeight * options.height);
reflection = $("<canvas />")[0];
if (reflection.getContext) {
context = reflection.getContext("2d");
try {
//11
$(reflection).attr({width: imageWidth, height: imageHeight});
context.save();
// отсчитываем по x не от нуля, а наоборот от значения равной ширине изображения
context.translate(imageWidth, 0);
context.scale(-1, 1);
// рисуем картинку отражение
context.drawImage(img, 0, 0, imageWidth, imageHeight);
context.restore();
context.globalCompositeOperation = "destination-out";
//рисуем градиент поверх картинки
gradient = context.createLinearGradient(0, 0, imageWidth,0);
gradient.addColorStop(0, "rgba(255, 255, 255, " + (1 - options.opacity) + ")");
gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
context.fillStyle = gradient;
context.rect(0, 0, imageWidth, imageHeight);
context.fill();
} catch(e) {
return;
}
} else {
if (!$.browser.msie) return;
reflection = $("<img />").attr("src", img.src).css({
width: imageWidth,
height: imageHeight,
marginBottom: reflectionHeight - imageHeight,
filter: "FlipV progid:DXImageTransform.Microsoft.Alpha(Opacity=" + (options.opacity * 100) + ", FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=0, FinishY=" + (reflectionHeight / imageHeight * 100) + ")"
})[0];
}
//я изменил display чтобы изображения в врапере встали вряд
$(reflection).css({display: "inline", border: 0});
wrapper = $(/^a$/i.test(img.parentNode.tagName) ? "<span />" : "<div />").insertAfter(img).append([img, reflection])[0];
wrapper.className = img.className;
$.data(img, "reflected", wrapper.style.cssText = img.style.cssText);
//изменение ширины враппера(вместо Y, теперь меняем X)
$(wrapper).css({width: imageWidth*2, height: imageHeight, overflow: "hidden"});
//я изменил display чтобы изображения в врапере встали вряд
img.style.cssText = "display: inline; border: 0px";
img.className = "reflected";
}
if (img.complete) doReflect();
else $(img).load(doReflect);
}
});
},
unreflect: function() {
return this.unbind("load").each(function() {
var img = this, reflected = $.data(this, "reflected"), wrapper;
if (reflected !== undefined) {
wrapper = img.parentNode;
img.className = wrapper.className;
img.style.cssText = reflected;
$.removeData(img, "reflected");
wrapper.parentNode.replaceChild(img, wrapper);
}
});
}
});
})(jQuery);
|
а вообще что мешает считать полностью картинку из канвы?
и вернуть её в канву но разница в том что началом ставим конец канвы ,а концом начало. должно сработать и всего 4 строки
var cnvobj=document.getElementById(elem_kanva.name_can);
var ctx=cnvobj.getContext("2d");
imgd = ctx.getImageData(0,0, elem_kanva.width, elem_kanva.height);
ctx.putImageData(imgd,elem_kanva.width,elem_kanva.height,-elem_kanva.width,-elem_kanva.height )
;пробуй должно развернуть по идее |
Забавно. Но похоже если развернёт, то содержимое окажется за границами видимости. мне отчего-то кажется что контейнер вслед за твоими манипуляциями растягиваться небудет. К томуже если исходное и развёрнутое изображение будет в канве, это как минимум лишит возможности сохранить картинку, ибо содержимое канвы не сохраняется обычно.
Да и на IE как я понял, совсем другая технология. Хотя я только 5 минут на канвас потратил, поверхностно по теме пробежался, так что могу ошибаться. |
dmitriymar,
Интересная идея.. нужно будет попробывать! |
вобщем перевые два примера полностью рабочие-на моём проекте работают.
Цитата:
для ие технология такаяже -в ие работает это. только до 8 включительно нужно библиотеку подключать. я не помню размер абсолютный или смещение задаётся при размещении изображения на канве- если абсолютный то не сработает-поскольку размер изображения не может быть минус. DjDiablo, зачем сохранять исходное изображение если оно нужно перевёрнутым? ну а по второму ,то я там написал чтоб попробовал-поскольку я не помню как размеры берутся. абсолютные. а в выводах ты ошибся-не за пределами. а просто не будет поскольку ширина и высота изображения меньше 0 пикселов. а если бы смещение было,как в половине свойств канвы-то всё было бы норм |
Такой вопрос, а возможно ли отразить зеркально текст, чтобы каждый символ отображался зеркально но не меняя порядок символов? Или повернуть каждый символ на 180°?
Одним словом в юникоде есть символ «©» копирирайта, но нету символа копилефта, есть шрифты с засечками, например «Таймс», значит надо отразить по горизонтали, есть шрифты без засечек, например «Ариал», значит можно отразить и можно повернуть на 180° |
| Часовой пояс GMT +3, время: 00:49. |