Bagaimana saya bisa menggeser dan memperbesar menggunakan fabricjs? Saya sudah mencoba menggunakan m.... Question from @Ardenboys

May 2020 1 22 Report

Bagaimana saya bisa menggeser dan memperbesar menggunakan fabricjs? Saya sudah mencoba menggunakan metode zoomToPoint dan setZoom tetapi mereka tidak bekerja untuk panning. Begitu saya mulai menggunakan titik zoom yang berbeda, saya mulai mengalami masalah.

$('#zoomIn').click(function(){
canvas.setZoom(canvas.getZoom() * 1.1 ) ;
}) ;

$('#zoomOut').click(function(){
canvas.setZoom(canvas.getZoom() / 1.1 ) ;
}) ;

$('#goRight').click(function(){
//Need to implement
}) ;

$('#goLeft').click(function(){
//Need to implement
}) ;

ini linknya :

http://jsfiddle.net/hdramos/ux16013L/

derryhandoyo

Verified answer

Fabricjs digunakan untuk melakukan zoom dan pan pada sebuah canvas.

Untuk fungsi zoom sudah benar bisa dilakukan melalui

canvas.setZoom(canvas.getZoom() * skala ) ;

Sedangkan untuk fungsi pan bisa dicapai dengan kode

canvas.relativePan(new fabric.Point(x,y)) ;

dimana x dan y diganti dengan nilai posisi yang baru.

Misal untuk bergeser ke kanan maka nilai x diganti dengan nilai positif dan y diganti 0, sebaliknya untuk bergeser ke kiri maka nilai x diganti dengan nilai negatif dan y diganti dengan nilai 0

Sedangkan untuk bergeser ke atas atau ke bawah nilai x diganti dengan 0, dan untuk nilai y diganti dengan nilai positif untuk geser ke bawah, dan nilai negatif untuk geser ke atas.

Atau jika dituliskan

$('#goRight').click(function(){

canvas.relativePan(new fabric.Point(30,0)) ;

}) ;

$('#goLeft').click(function(){

canvas.relativePan(new fabric.Point(-30,0)) ;

}) ;

$('#goUp').click(function(){

canvas.relativePan(new fabric.Point(0,-30)) ;

}) ;

$('#goDown').click(function(){

canvas.relativePan(new fabric.Point(0,30)) ;