Блог

Я использую tactileJS для создания шаблона изображения. Я хочу создать шаблон асимметрии с повторяющимися изображениями, используя HTML и javascript.

Изображение может быть повторено в форме треугольника / начала или любой другой многоугольной формы. Как показано на рисунке ниже.

Я пробовал это, но tactile js выдает шаблон, но не может заполнить изображение в каждой форме шаблона. ниже приведены результаты tactile js

это то, что я пробовал.

 <img style="visibility: hidden;" src="pizza.png" id="img">
        <canvas id="canvas" width="500" height="500">
        </canvas>


import { mul, EdgeShape, tilingTypes, IsohedralTiling } 
    from '../lib/tactile.js';

function drawRandomTiling()
{
    var canvas = document.getElementById( 'canvas' );
    var ctx = canvas.getContext( '2d' );

    const { tiling, edges } = makeRandomTiling();

    // Make some random colours.
    let cols = [];
    for( let i = 0; i < 3;   i ) {
        cols.push( 'rgb('  
            Math.floor( Math.random() * 255.0 )   ','  
            Math.floor( Math.random() * 255.0 )   ','  
            Math.floor( Math.random() * 255.0 )   ')' );
    }

    ctx.lineWidth = 1.0;
    ctx.strokeStyle = '#000';
    var imgElement = document.getElementById('img');
    var pattern = ctx.createPattern(imgElement, "repeat");

    // Define a world-to-screen transformation matrix that scales by 50x.
    const ST = [ 50.0, 0.0, 0.0, 
                 0.0, 50.0, 0.0 ];

    for( let i of tiling.fillRegionBounds( -2, -2, 12, 12 ) ) {
        const T = mul( ST, i.T );
        //ctx.fillStyle = cols[ tiling.getColour( i.t1, i.t2, i.aspect ) ];
        ctx.fillStyle = pattern;

        let start = true;
        ctx.beginPath();

        for( let si of tiling.shape() ) {
            const S = mul( T, si.T );
            let seg = [ mul( S, { x: 0.0, y: 0.0 } ) ];

            if( si.shape != EdgeShape.I ) {
                const ej = edges[ si.id ];
                seg.push( mul( S, ej[0] ) );
                seg.push( mul( S, ej[1] ) );
            }

            seg.push( mul( S, { x: 1.0, y: 0.0 } ) );

            if( si.rev ) {
                seg = seg.reverse();
            }

            if( start ) {
                start = false;
                ctx.moveTo( seg[0].x, seg[0].y );
            }

            if( seg.length == 2 ) {
                ctx.lineTo( seg[1].x, seg[1].y );
            } else {
                ctx.bezierCurveTo( 
                    seg[1].x, seg[1].y, 
                    seg[2].x, seg[2].y, 
                    seg[3].x, seg[3].y );
            }
        }   

        ctx.closePath();
        ctx.fill();
        //ctx.drawImage(imgElement, 10, 10, 60, 60);
        ctx.stroke();
    }
}