Tìm kiếm trang web

javascript - Làm thế nào tôi có thể sử dụng react-zoom-pan-pinch để cho phép người dùng xem toàn bộ biểu đồ mà thay đổi kích thước dựa trên đầu vào của người dùng?

Tôi đã thiết kế và xây dựng một Sơ đồ Tổ chức tương tác cho phép người dùng xem các tổ chức kinh doanh theo dạng phân cấp. Theo mặc định, chỉ hàng đầu tiên dưới nút gốc của sơ đồ hiển thị, nhưng người dùng có thể nhấp để mở rộng sơ đồ hơn nữa, từ đó thay đổi kích thước của sơ đồ. Người dùng cũng có thể kéo và thả các nút để mô phỏng việc tái cơ cấu doanh nghiệp.

Hiện tại tôi đang sử dụng react-zoom-pan-pinch để cho phép người dùng phóng to và di chuyển biểu đồ. Nó hoạt động rất tốt khi sơ đồ tổ chức chưa được mở rộng quá nhiều, nhưng trở nên vấn đề khi tỷ lệ biểu đồ lớn hơn.

Vấn đề là các tổ chức được biểu diễn bằng biểu đồ rất rộng so với chiều sâu của chúng, nghĩa là một biểu đồ mở rộng hoàn toàn là hình chữ nhật ngang, không phải hình vuông. react-zoom-pan-pinch sẽ chỉ cho phép tôi thu nhỏ đến giới hạn chiều cao tối đa của biểu đồ, nghĩa là người dùng không thể xem toàn bộ tổ chức đã mở rộng mà không phải cuộn từ bên này sang bên kia. Đây không phải là hành vi chấp nhận được.

Điều này là để làm việc, vì vậy tôi không thể đăng mã mà không vi phạm nhiều thỏa thuận. Thay vào đó, tôi đã liên kết tới tài liệu react-zoom-pan-pinch và sẽ nói về những gì tôi đã thử thay đổi.

Nơi đầu tiên tôi xem là phần TransformWrapper Props trong tài liệu.

Ở đó tôi đã tìm thấy các props inititalScale, minScale và maxScale.

Tôi có thể đặt thuộc tính initialScale thành một giá trị nhỏ hơn 1 và thu được kết quả gần với những gì tôi muốn lúc đầu. Việc đặt nó thành 0,5 dẫn đến biểu đồ bị thu nhỏ hơn so với bình thường, nhưng khi tôi phóng to đến giá trị 1 thì không thể thu nhỏ lại. Điều này là có thể dự đoán, vì thuộc tính minScale vẫn được đặt thành 1.

Sau khi kiểm tra rằng các thuộc tính thực sự hoạt động, tôi đã tiến hành đặt minScale thành 0,5, giả sử rằng tôi sẽ có thể thu phóng trở lại chế độ xem ban đầu khi initialScale được đặt thành 0,5. Điều này có vẻ như nên hoạt động, nhưng nó đã không xảy ra. Ngay cả khi thuộc tính minScale được đặt thành 0,5, tôi vẫn không thể thu phóng trở lại sau khi zoom vào một giá trị là 1. Điều này thật kỳ lạ đối với tôi, vì việc chấp nhận 0,5 làm thuộc tính initialScale và việc hiển thị biểu đồ tiếp theo cho thấy các giá trị dưới 1 là chấp nhận được.

Hiện tại tôi đang thử nghiệm với các props còn lại được liệt kê trong tài liệu, nhưng vẫn chưa đạt được kết quả mong muốn (thu phóng ra vô hạn).

Tôi tin rằng nguồn gốc của vấn đề là react-zoom-pan-pinch được thiết kế cho hình ảnh, không phải cho những thứ thay đổi kích thước và tỉ lệ khung hình, nhưng đây là một gói tốt và tôi muốn tiếp tục sử dụng nó.

Những cài đặt nào tôi nên sử dụng để cho phép thu phóng vô hạn?

Câu trả lời #1

Tôi đã tìm ra câu trả lời cho câu hỏi của chính mình. Hóa ra minScale, maxScale và các props khác không được truyền đúng cách cho component. Khi chúng được truyền đúng cách, gói này hoạt động rất tốt. Đây là giải thích/sửa lỗi của tôi

Tài liệu hướng dẫn gợi ý làm điều này:

import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";

class Example extends Component {
  render() {
    return (
      <TransformWrapper
        initialScale={1}
        minScale={0.5}
        maxScale={7}
        initialPositionX={200}
        initialPositionY={100}
      >
        {({ zoomIn, zoomOut, resetTransform, ...rest }) => (
          <React.Fragment>
            <div className="tools">
              <button onClick={() => zoomIn()}>+</button>
              <button onClick={() => zoomOut()}>-</button>
              <button onClick={() => resetTransform()}>x</button>
            </div>
            <TransformComponent>
              <img src="image.jpg" alt="test" />
              <div>Example text</div>
            </TransformComponent>
          </React.Fragment>
        )}
      </TransformWrapper>
    );
  }
}

Những điều trên không hoạt động, và các props minScale và maxScale không được truyền vào component. Nếu bạn mở công cụ phát triển React trong trình duyệt của mình và đi tới TransformWrapper, bạn sẽ thấy các giá trị mặc định là 1 cho minScale và 8 cho maxScale, không phải các giá trị bạn đã nhập trong mã của mình.

Bạn có thể giải quyết vấn đề bằng cách tạo một đối tượng:

  const transformOptions = {
    initialScale: 1,
    minScale: 0.5,
    maxScale: 2
  }

Sau đó thiết lập một prop options bên trong component TransformWrapper bằng với đối tượng, như sau:

import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";

class Example extends Component {
  render() {
    return (
      <TransformWrapper
        initialScale={1}
        options={transformOptions}
        initialPositionX={200}
        initialPositionY={100}
      >
        {({ zoomIn, zoomOut, resetTransform, ...rest }) => (
          <React.Fragment>
            <div className="tools">
              <button onClick={() => zoomIn()}>+</button>
              <button onClick={() => zoomOut()}>-</button>
              <button onClick={() => resetTransform()}>x</button>
            </div>
            <TransformComponent>
              <img src="image.jpg" alt="test" />
              <div>Example text</div>
            </TransformComponent>
          </React.Fragment>
        )}
      </TransformWrapper>
    );
  }
}

Điều tương tự cũng áp dụng cho các tùy chọn pan, wheel và zoom. Chúng không hoạt động nếu được thiết lập trực tiếp trong thành phần như hướng dẫn tài liệu, nhưng sẽ hoạt động nếu bạn tạo các đối tượng như tôi đã làm ở trên.