फैब्रिकज पैन और ज़ूम

मैं फैब्रिक का उपयोग करके पैन और ज़ूम कैसे कर सकता हूं? मैंने zoomToPoint और setZoom विधियों का उपयोग करने का प्रयास किया है लेकिन वे पैनिंग के लिए काम नहीं करते हैं। एक बार जब मैं विभिन्न ज़ूम पॉइंट्स का उपयोग शुरू करता हूं तो मुझे परेशानी होती है।फैब्रिकज पैन और ज़ूम

$('#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 
}) ;

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

स्रोत

2015-05-26 d0001

आप उस पर विस्तृत कर सकते हैं? मैं समायोजन कैसे करूं? – d0001

का उपयोग कर इसे हल:

relativePan() absolutePan()

[अपडेट]

$('#goRight').click(function(){ 
    var units = 10 ; 
    var delta = new fabric.Point(units,0) ; 
    canvas.relativePan(delta) ; 
}) ; 

$('#goLeft').click(function(){ 
    var units = 10 ; 
    var delta = new fabric.Point(-units,0) ; 
    canvas.relativePan(delta) ; 
}) ; 
$('#goUp').click(function(){ 
    var units = 10 ; 
    var delta = new fabric.Point(0,-units) ; 
    canvas.relativePan(delta) ; 
}) ; 

$('#goDown').click(function(){ 
    var units = 10 ; 
    var delta = new fabric.Point(0,units) ; 
    canvas.relativePan(delta) ; 
});

http://jsfiddle.net/ux16013L/2/

स्रोत

2015-05-26 23:45:52 d0001

क्या आप कुछ उदाहरण कोड प्रदान कर सकते हैं और अपना JSFiddle अपडेट कर सकते हैं? धन्यवाद! –

कृपया एक ही चीज़ करने की कोशिश कर रहा हूँ! – Brent

कृपया udpate देखें। यह वही है जो मेरे पास है। – d0001

मुझे पता है कि यह पहले से ही उत्तर दिया गया है, लेकिन मुझे माउस पैनिंग करना पड़ा, इसलिए मैंने ऐसा करने के स्वीकृत उत्तर की पहेली को अनुकूलित किया। मैं इसे यहां किसी के लिए पोस्ट करता हूं जिसे इस तरह कुछ करना है। http://jsfiddle.net/gncabrera/hkee5L6d/5/

स्रोत

2015-11-13 13:56:59 gncabrera

यह आईई में काम नहीं करता प्रतीत होता है। इसकी प्रकृति से e.e.movementX और e.e.movementY fabric.js के IE संस्करण में मौजूद नहीं है। जल्दी से चारों ओर देखा और http: // stackoverflow पाया।com/प्रश्न/40355425/fabricjs-है-नहीं दे मुझे-movementx और movementy करने वाली अखिल एक छवि में यानी तथापि- – Insight

तुम सिर्फ प्रदर्शन में कैनवास पैन करने के लिए, और तत्वों की स्थिति को बदलने के लिए नहीं चाहते हैं, आप का उपयोग कर सकते हैं:

var panning = false; 
canvas.on('mouse:up', function (e) { 
    panning = false; 
}); 

canvas.on('mouse:down', function (e) { 
    panning = true; 
}); 
canvas.on('mouse:move', function (e) { 
    if (panning && e && e.e) { 
     var units = 10; 
     var delta = new fabric.Point(e.e.movementX, e.e.movementY); 
     canvas.relativePan(delta); 
    } 
});

यहाँ बेला है: यह सिर्फ मुख्य विचार है this solution।

विचार overflow: hidden के सीएसएस के साथ एक निश्चित आकार कंटेनर रखना है जिसमें इसके अंदर एक व्यय कैनवास है। पैन कंटेनर के अंदर कैनवास को स्थानांतरित करेगा ताकि उपयोगकर्ता हर बार व्यय कैनवास के विभिन्न क्षेत्रों को देख सके।

स्रोत

2015-12-29 21:04:14 Dudi

कैनवास ज़ूम (माउस व्हील का उपयोग करके) और पैन के लिए मेरा समाधान है (बाएं/ऊपर/दाएं/नीचे कुंजी या शिफ्ट कुंजी + माउस बाएं + माउस चाल का उपयोग करके)। https://github.com/SabatinoMasala/fabric-clipping-demo/blob/master/src/classes/Panning.js

यह एक है: https://sabatinomasala.github.io/fabric-clipping-demo/

कोड पैनिंग व्यवहार के लिए जिम्मेदार पीछा कर रहा है:

https://jsfiddle.net/milanhlinak/7s4w0uLy/8/

<!DOCTYPE html> 
<html> 

<head> 
    <script type="text/javascript" src="lib/jquery-3.1.1.min.js"></script> 
    <script type="text/javascript" src="lib/fabric.min.js"></script> 
</head> 

<body> 

    <canvas id="canvas" style="border: 1px solid #cccccc"></canvas> 

    <script> 
     var Direction = { 
      LEFT: 0, 
      UP: 1, 
      RIGHT: 2, 
      DOWN: 3 
     }; 

     var zoomLevel = 0; 
     var zoomLevelMin = 0; 
     var zoomLevelMax = 3; 

     var shiftKeyDown = false; 
     var mouseDownPoint = null; 

     var canvas = new fabric.Canvas('canvas', { 
      width: 500, 
      height: 500, 
      selectionKey: 'ctrlKey' 
     }); 

     canvas.add(new fabric.Rect({ 
      left: 100, 
      top: 100, 
      width: 50, 
      height: 50, 
      fill: '#faa' 

     })); 
     canvas.add(new fabric.Rect({ 
      left: 300, 
      top: 300, 
      width: 50, 
      height: 50, 
      fill: '#afa' 
     })); 

     canvas.on('mouse:down', function (options) { 
      var pointer = canvas.getPointer(options.e, true); 
      mouseDownPoint = new fabric.Point(pointer.x, pointer.y); 
     }); 
     canvas.on('mouse:up', function (options) { 
      mouseDownPoint = null; 
     }); 
     canvas.on('mouse:move', function (options) { 
      if (shiftKeyDown && mouseDownPoint) { 
       var pointer = canvas.getPointer(options.e, true); 
       var mouseMovePoint = new fabric.Point(pointer.x, pointer.y); 
       canvas.relativePan(mouseMovePoint.subtract(mouseDownPoint)); 
       mouseDownPoint = mouseMovePoint; 
       keepPositionInBounds(canvas); 
      } 
     }); 
     fabric.util.addListener(document.body, 'keydown', function (options) { 
      if (options.repeat) { 
       return; 
      } 
      var key = options.which || options.keyCode; // key detection 
      if (key == 16) { // handle Shift key 
       canvas.defaultCursor = 'move'; 
       canvas.selection = false; 
       shiftKeyDown = true; 
      } else if (key === 37) { // handle Left key 
       move(Direction.LEFT); 
      } else if (key === 38) { // handle Up key 
       move(Direction.UP); 
      } else if (key === 39) { // handle Right key 
       move(Direction.RIGHT); 
      } else if (key === 40) { // handle Down key 
       move(Direction.DOWN); 
      } 
     }); 
     fabric.util.addListener(document.body, 'keyup', function (options) { 
      var key = options.which || options.keyCode; // key detection 
      if (key == 16) { // handle Shift key 
       canvas.defaultCursor = 'default'; 
       canvas.selection = true; 
       shiftKeyDown = false; 
      } 
     }); 
     jQuery('.canvas-container').on('mousewheel', function (options) { 
      var delta = options.originalEvent.wheelDelta; 
      if (delta != 0) { 
       var pointer = canvas.getPointer(options.e, true); 
       var point = new fabric.Point(pointer.x, pointer.y); 
       if (delta > 0) { 
        zoomIn(point); 
       } else if (delta < 0) { 
        zoomOut(point); 
       } 
      } 
     }); 

     function move(direction) { 
      switch (direction) { 
      case Direction.LEFT: 
       canvas.relativePan(new fabric.Point(-10 * canvas.getZoom(), 0)); 
       break; 
      case Direction.UP: 
       canvas.relativePan(new fabric.Point(0, -10 * canvas.getZoom())); 
       break; 
      case Direction.RIGHT: 
       canvas.relativePan(new fabric.Point(10 * canvas.getZoom(), 0)); 
       break; 
      case Direction.DOWN: 
       canvas.relativePan(new fabric.Point(0, 10 * canvas.getZoom())); 
       break; 
      } 
      keepPositionInBounds(canvas); 
     } 


     function zoomIn(point) { 
      if (zoomLevel < zoomLevelMax) { 
       zoomLevel++; 
       canvas.zoomToPoint(point, Math.pow(2, zoomLevel)); 
       keepPositionInBounds(canvas); 
      } 
     } 

     function zoomOut(point) { 
      if (zoomLevel > zoomLevelMin) { 
       zoomLevel--; 
       canvas.zoomToPoint(point, Math.pow(2, zoomLevel)); 
       keepPositionInBounds(canvas); 
      } 
     } 

     function keepPositionInBounds() { 
      var zoom = canvas.getZoom(); 
      var xMin = (2 - zoom) * canvas.getWidth()/2; 
      var xMax = zoom * canvas.getWidth()/2; 
      var yMin = (2 - zoom) * canvas.getHeight()/2; 
      var yMax = zoom * canvas.getHeight()/2; 

      var point = new fabric.Point(canvas.getWidth()/2, canvas.getHeight()/2); 
      var center = fabric.util.transformPoint(point, canvas.viewportTransform); 

      var clampedCenterX = clamp(center.x, xMin, xMax); 
      var clampedCenterY = clamp(center.y, yMin, yMax); 

      var diffX = clampedCenterX - center.x; 
      var diffY = clampedCenterY - center.y; 

      if (diffX != 0 || diffY != 0) { 
       canvas.relativePan(new fabric.Point(diffX, diffY)); 
      } 
     } 

     function clamp(value, min, max) { 
      return Math.max(min, Math.min(value, max)); 
     } 
    </script> 

</body> 

</html>

स्रोत

2017-03-24 10:09:17

मैं Github fabric.js कैनवास पैनिंग और संभवत: ज़ूम का उपयोग करने पर एक उदाहरण है fabric.Canvas.prototype पर सरल विस्तार, जो आपको कैनवास पर 'ड्रैग मोड' टॉगल करने में सक्षम बनाता है:

canvas.toggleDragMode(true); // Start panning 
canvas.toggleDragMode(false); // Stop panning

निम्नलिखित स्निपेट पर एक नज़र डालें, दस्तावेज़ पूरे कोड में उपलब्ध है।

const STATE_IDLE = 'idle'; 
 
const STATE_PANNING = 'panning'; 
 
fabric.Canvas.prototype.toggleDragMode = function(dragMode) { 
 
    // Remember the previous X and Y coordinates for delta calculations 
 
    let lastClientX; 
 
    let lastClientY; 
 
    // Keep track of the state 
 
    let state = STATE_IDLE; 
 
    // We're entering dragmode 
 
    if (dragMode) { 
 
    // Discard any active object 
 
    this.discardActiveObject(); 
 
    // Set the cursor to 'move' 
 
    this.defaultCursor = 'move'; 
 
    // Loop over all objects and disable events/selectable. We remember its value in a temp variable stored on each object 
 
    this.forEachObject(function(object) { 
 
     object.prevEvented = object.evented; 
 
     object.prevSelectable = object.selectable; 
 
     object.evented = false; 
 
     object.selectable = false; 
 
    }); 
 
    // Remove selection ability on the canvas 
 
    this.selection = false; 
 
    // When MouseUp fires, we set the state to idle 
 
    this.on('mouse:up', function(e) { 
 
     state = STATE_IDLE; 
 
    }); 
 
    // When MouseDown fires, we set the state to panning 
 
    this.on('mouse:down', (e) => { 
 
     state = STATE_PANNING; 
 
     lastClientX = e.e.clientX; 
 
     lastClientY = e.e.clientY; 
 
    }); 
 
    // When the mouse moves, and we're panning (mouse down), we continue 
 
    this.on('mouse:move', (e) => { 
 
     if (state === STATE_PANNING && e && e.e) { 
 
     // let delta = new fabric.Point(e.e.movementX, e.e.movementY); // No Safari support for movementX and movementY 
 
     // For cross-browser compatibility, I had to manually keep track of the delta 
 

 
     // Calculate deltas 
 
     let deltaX = 0; 
 
     let deltaY = 0; 
 
     if (lastClientX) { 
 
      deltaX = e.e.clientX - lastClientX; 
 
     } 
 
     if (lastClientY) { 
 
      deltaY = e.e.clientY - lastClientY; 
 
     } 
 
     // Update the last X and Y values 
 
     lastClientX = e.e.clientX; 
 
     lastClientY = e.e.clientY; 
 

 
     let delta = new fabric.Point(deltaX, deltaY); 
 
     this.relativePan(delta); 
 
     this.trigger('moved'); 
 
     } 
 
    }); 
 
    } else { 
 
    // When we exit dragmode, we restore the previous values on all objects 
 
    this.forEachObject(function(object) { 
 
     object.evented = (object.prevEvented !== undefined) ? object.prevEvented : object.evented; 
 
     object.selectable = (object.prevSelectable !== undefined) ? object.prevSelectable : object.selectable; 
 
    }); 
 
    // Reset the cursor 
 
    this.defaultCursor = 'default'; 
 
    // Remove the event listeners 
 
    this.off('mouse:up'); 
 
    this.off('mouse:down'); 
 
    this.off('mouse:move'); 
 
    // Restore selection ability on the canvas 
 
    this.selection = true; 
 
    } 
 
}; 
 

 
// Create the canvas 
 

 
let canvas = new fabric.Canvas('fabric') 
 
canvas.backgroundColor = '#f1f1f1'; 
 

 
// Add a couple of rects 
 

 
let rect = new fabric.Rect({ 
 
    width: 100, 
 
    height: 100, 
 
    fill: '#f00' 
 
}); 
 
canvas.add(rect) 
 

 
rect = new fabric.Rect({ 
 
    width: 200, 
 
    height: 200, 
 
    top: 200, 
 
    left: 200, 
 
    fill: '#f00' 
 
}); 
 
canvas.add(rect) 
 

 
// Handle dragmode change 
 

 
let dragMode = false; 
 
$('#dragmode').change(_ => { 
 
    dragMode = !dragMode; 
 
    canvas.toggleDragMode(dragMode); 
 
});

<div> 
 
    <label for="dragmode"> 
 
    Enable panning 
 
    <input type="checkbox" id="dragmode" name="dragmode" /> 
 
    </label> 
 
</div> 
 
<canvas width="300" height="300" id="fabric"></canvas> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.15/fabric.min.js"></script>

स्रोत

2017-10-21 09:56:09 Sabatino

फैब्रिकज पैन और ज़ूम

उत्तर

संबंधित मुद्दे