@ K3N Отличная демонстрация! Кажется, это понятно. При использовании WebGL я, вероятно, буду использовать другой подход и отобразить изображение на 3d-модели, верно?

я есть плоское изображение, которое я хочу преобразовать, чтобы оно выглядело как проекция на эллиптический цилиндр.

Я нашел отличный скрипт от Blindman67 для обычного цилиндра вhttps://stackoverflow.com/a/40999097/4273683

Однако я не понимаю, как изменить скрипт, чтобы получить эллиптический результат. Любая идея?

Большое спасибо за помощь.

var createImage=function(w,h){var i=document.createElement("canvas");i.width=w;i.height=h;i.ctx=i.getContext("2d");return i;}

var canvas = createImage(400,400);
var ctx = canvas.ctx;
document.body.appendChild(canvas)
ctx.clearRect(0,0,500,500)
var image = createImage(400,200);
image.ctx.font = "60px arial";
image.ctx.textAlign = "center";
image.ctx.fillStyle = "#7F5";
image.ctx.fillRect(0,0,image.width,image.height)
image.ctx.fillStyle = "white";
image.ctx.fillText("Wrap around",200,60)
image.ctx.fillText("Some images",200,140)


function draw(ang,tilt, perspective){
    var step = 1/(Math.max(image.width,400));
    for(var i = 0; i < 1; i += step){
        var a = i * Math.PI;
        var a1 = (i+ step*2) * Math.PI ;
        var ix = i * image.width*1.2;
        var iw = step * image.width*1.2;
        a += ang * Math.PI * 2;
        a1 += ang * Math.PI * 2;
        a = Math.PI -a;
        a1 = Math.PI -a1;
        var x = canvas.width * 0.5;
        var y = canvas.height * 0.1;
        
        var x1 = x + Math.cos(a1) * 110;
        var y1 = y + Math.sin(a) * tilt;
        x += Math.cos(a) * 110;
        y += Math.sin(a) * tilt;
        var s = Math.sin(a);
        var s1 = Math.sin(a1);
        if(s > 0 || s1 > 0){
            ctx.drawImage(image,ix,0,iw,image.height,x1,y- s * perspective*0.5,x-x1,200 + s * perspective)
        }
        
        
    }
}
var w = canvas.width;
var h = canvas.height;




// main update function
function update(timer){
    ctx.setTransform(1,0,0,1,0,0); // reset transform
    ctx.globalAlpha = 1;           // reset alpha
    ctx.fillStyle = "black"
    ctx.fillRect(0,0,w,h);
    draw(timer / 2000, 40,30)
    requestAnimationFrame(update);
}
requestAnimationFrame(update);

 kirschkern28 нояб. 2017 г., 16:12
@ K3N Отличная демонстрация! Кажется, это понятно. При использовании WebGL я, вероятно, буду использовать другой подход и отобразить изображение на 3d-модели, верно?
 Chris G27 нояб. 2017 г., 14:59
Можете ли вы уточнить? Учитывая, что здесь есть базовое искажение перспективы, результат, строго говоря, уже является эллипсом. Как еще вы хотите, чтобы это работало?
 user169359328 нояб. 2017 г., 03:49
Почему бы не рассмотреть возможность использования WebGL / three.js для 3D-фигур (пример)? Если это вариант, я могу добавить ответ на этот вопрос.
 Blindman6727 нояб. 2017 г., 16:48
Функция ограничена искажением по одной оси (под любым углом). Он рисует много полос, масштабированных и переведенных так, чтобы изображение выглядело как цилиндр. В этом примере вертикальные линии всегда будут параллельными. Отображение на другую поверхность возможно со вторым проходом, но возможные поверхности очень ограничены. Вам нужно будет описать тип поверхности (или предоставить и пример изображения), чтобы мы знали, можно ли выполнить то же самое, используя тот же метод, или вам нужно другое решение.
 kirschkern28 нояб. 2017 г., 16:01
Окончательным результатом должен стать предварительный просмотр рубашки, используемый в редакторе вязаных изделий. Исходное изображение состоит из 4 частей (спереди, сзади, рука влево / вправо) и должно быть показано в предварительном просмотре. Мне удалось продвинуться довольно далеко, но я хотел бы иметь «плоский живот» на полученном изображении. Это то, что я до сих пор:klotzen-statt-kleckern.de/customers/wildemasche/designer/js/... (Нажмите на 4 части изображения, чтобы создать предварительный просмотр). В настоящее время функция цилиндра используется для передних и (наполовину) рычагов. Я думал об использовании WebGL, но у меня нет опыта в этой области. Большое спасибо!

Ответы на вопрос(0)

Ваш ответ на вопрос