Jump to content

How to expend/pivot stage when dragging object to edge of rendering screen


Recommended Posts

function setupBlockDrag() {
    let isDragging = false
    let data = null

    rect.on('pointerdown', onDragStart)
    rect.on('pointerup', onDragEnd)
    rect.on('pointermove', onDragMove)

    function onDragStart(event) {
      isDragging = true
      data = event.data
      let local = rect.toLocal(event.data.global)
      let anchorX = local.x / rect.width
      let anchorY = local.y / rect.height
      rect.anchor.set(anchorX, anchorY)

    function onDragEnd(event) {
      isDragging = false
      let local = {
        x: rect.anchor.x * rect.width,
        y: rect.anchor.y * rect.height,
      rect.x -= local.x
      rect.y -= local.y
      rect.anchor.set(0, 0)

    function onDragMove() {
      if (!isDragging) return
      const newPosition = data.getLocalPosition(rect.parent)
      rect.x = newPosition.x
      rect.y = newPosition.y
      // Pivot stage

I have the above code that moves a rectangle graphics that is anchor to the mouse position.

Since I'm new to Pixi development, my question might be going to the wrong direction,

but I want to pivot the stage and load more background so that it looks like the rect is moving.


Basically, I'm trying to achieve similar movement effect of draw.io (see attachment).

What will be the correct design to approach this?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...