ClojureScript - Cropper zoom при нажатии кнопки - PullRequest
0 голосов
/ 19 февраля 2019

Я хотел бы увеличить или уменьшить изображение перед кадрированием.Я использую cropperjs.Я пытаюсь это с помощью следующего кода.

(def Cropper (oget js/window "Cropper"))

(defn zoom-in [cropper-inst]
  (when cropper-inst
    (ocall cropper-inst "zoom" 0.1)))

(defn zoom-out [cropper-inst]
  (when cropper-inst
  (ocall cropper-inst "zoom" "-0.1")))

(defn mount-listeners [cropper]
  (let [zoom-in-el (ocall js/window "document.getElementById" "zoom-in-el")
          zoom-out-el (ocall js/window "document.getElementById" "zoom-out-el")
          cropper-el (-> cropper .-target)] 
      (ocall zoom-in-el "addEventListener" "click" (zoom-in cropper-el))))

(defn mount-cropper [wrap]
  (when wrap
    (when-let [image (oget wrap "firstChild")]
      (let [cropper (Cropper. image #js{:aspectRatio 1
                                        :viewMode 0
                                        :guides false
                                        :rotatable false
                                        :zoomable true
                                        :ready mount-listeners})]
        cropper))))

Я монтирую обрезку на рендере.Но я не могу вызвать метод масштабирования.Он показывает ошибку: "Упс, отсутствует ожидаемый объектный ключ 'zoom'" .

Когда я называю zoom как (ocall cropper-inst "cropper" "zoom" 0.1),сообщение об ошибке: "Упс. Ожидается функция для ключевого пути 'cropper', получено взамен" .

Объект события выглядит так, как показано на рисунке ниже: enter image description here Но crpper-el - это HTML-тег как <img src="https://static.pexels.com/photos/248797/pexels-photo-248797.jpeg" class="spots_ui_components_cropper--cropped-image27970 spots_ui_components_cropper--cropped-image cropper-hidden"> Есть идеи?

1 Ответ

0 голосов
/ 20 февраля 2019

Я наконец получил это сработало.Я использовал (.- cropper (js-this)) и добавил # перед вызовом метода увеличения.Вот правильный код:

(def Cropper (oget js/window "Cropper"))

(defn zoom-in [cropper-inst]
  (when cropper-inst    
    (ocall cropper-inst "zoom" 0.1)))

(defn zoom-out [cropper-inst]
  (when cropper-inst
  (ocall cropper-inst "zoom" "-0.1")))

(defn mount-listeners [cropper]
  (let [zoom-in-el (ocall js/window "document.getElementById" "zoom-in-el")
          zoom-out-el (ocall js/window "document.getElementById" "zoom-out-el")
          cropper-this (.-cropper (js-this))]
      (ocall zoom-in-el "addEventListener" "click" #(zoom-in cropper-this))
      (ocall zoom-out-el "addEventListener" "click" #(zoom-out cropper-this))))

(defn mount-cropper [wrap]
  (when wrap
    (when-let [image (oget wrap "firstChild")]
      (let [cropper (Cropper. image #js{:aspectRatio 1
                                        :viewMode 0
                                        :guides false
                                        :rotatable false
                                        :zoomable true
                                        :ready mount-listeners})]
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...