ClojureScript - 裁剪按钮点击放大答案

【问题标题】：ClojureScript - Cropper zoom on button clickClojureScript - 裁剪按钮点击放大
【发布时间】：2019-02-19 12:41:12
【问题描述】：

我想在裁剪前放大或缩小图像。我正在使用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'”。

当我将缩放调用为 (ocall cropper-inst "cropper" "zoom" 0.1) 时，错误消息是 “糟糕，在关键路径 'cropper' 上应该有一个函数，而是得到了” .

事件对象如下图所示：但是，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"> 有什么想法吗？

【问题讨论】：

在 REPL 中，您可以使用 (js-keys cropper-inst) 查看该对象上的键。
@MikeFikes，我已经编辑了问题以查看对象中的键。我不确定为什么我没有像事件中那样将裁剪器元素作为对象获取。

标签： clojurescript cropperjs

【解决方案1】：

我终于成功了。我使用 (.-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})]

【讨论】：