Wie man ein Bild mehrfach in verschiedenen Richtungen zeichnet?

Ich habe ein Array wie dieses, die Idee ist, Bilder in verschiedenen Richtungen auszugeben und sie vertikal und horizontal auf einer Leinwand durch Skalierung zu spiegeln.Wie man ein Bild mehrfach in verschiedenen Richtungen zeichnet?

[{ 
    "pos":{ 
     "x":411, 
     "y":401.5 
    }, 
    "scale":{ 
     "x":1, 
     "y":1 
    } 
},{ 
    "pos":{ 
     "x":411, 
     "y":271.59625 
    }, 
    "scale":{ 
     "x":-1, 
     "y":1 
    } 
}]

Das Problem ist, dass ich die Leinwand anstelle der Bilder bin Skalierung, ist die Leinwand mehrere Male größer als die Bilder, die ich auf sie bin platzieren.

Wie skaliere ich das Bild, genannt window.video, anstelle der gesamten Leinwand?

Quelle

2017-02-27 Himmators

-1

EDIT: Wie weiter unten erwähnt, das funktioniert nicht mit negativen Werten ...

drawImage 2 zusätzliche Argumente für die Auslegung des Bildes erfolgen kann, so sollten folgende Arbeiten:

images.forEach((image) => { 
    // center borde köars innan loopen 
    let pos = center(image.pos) 
    cc.save() 
    cc.drawImage(window.video, pos.x, pos.y, window.video.width * image.scale.x, window.video.height * image.scale.y) 
    cc.restore() 
})

Dokumentation : https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images

Quelle

2017-02-27 18:10:29 BenShelton

ich es versucht zu ziehen, aber diese funktionieren nur für positive Zahlen und scheinen nicht für den Maßstab zu funktionieren. Ich habe diese Frage gefunden, aber verrate nicht, wie ich diese Antworten verwenden könnte. Http://stackoverflow.com/questions/29237305/how-to-flip-an-image-with-the-html5-canvas-without- Skalierung – Himmators

Wenn Sie Ihren ursprünglichen Code verwenden, aber die Breite und Höhe in drawImage angeben, um das Fenster zu sein.Video Höhe und Breite funktioniert das? – BenShelton

Ja würde es aber ich möchte negative Werte auf dWidth und dHeight, also kann ich diese nicht verwenden. dWidth und dHeight arbeiten nur mit positiven Werten. – Himmators

Rendern eines skalierten Bildes auf der Zeichenfläche.

function drawImage(image,x,y,scaleX,scaleY){ 
    ctx.setTransform(scaleX, 0, 0, scaleY, x, y); // set scale and translation 
    ctx.drawImage(image,0,0); 
} 

// when done drawing images you need to reset the transformation back to default 
ctx.setTransform(1,0,0,1,0,0); // set default transform

Wenn Sie das Bild gespiegelt, aber immer noch an der gleichen Position oben links

function drawImage(image, x, y, scaleX, scaleY){ 
    ctx.setTransform(scaleX, 0, 0, scaleY, x, y); // set scale and translation 
    x = scaleX < 0 ? -image.width : 0; // move drawing position if flipped 
    y = scaleY < 0 ? -image.height : 0; 
    ctx.drawImage(image, x, y); 
}

verwenden gezogen und über die Mitte des Bildes

function drawImage(image, x, y, scaleX, scaleY){ // x y define center 
    ctx.setTransform(scaleX, 0, 0, scaleY, x, y); // set scale and translation 
    ctx.drawImage(image, -image.width/2, -image.height/2); 
}

Quelle

2017-02-28 02:26:26 Blindman67

Wie man ein Bild mehrfach in verschiedenen Richtungen zeichnet?

Antwort

Verwandte Themen