时间戳

首页 > 解决方案 > 链接 Photoshop UXP 滑块

javascript - 链接 Photoshop UXP 滑块

问题描述

我目前正在尝试将频谱滑块的值链接到函数。到目前为止，功能集的图层不透明度虽然是批量播放，但效果很好。我正在努力寻找有关如何在更改时获取滑块值的信息，然后使用更新后的值运行该函数

目前功能如下。滑块可以在移动它时触发警报。

HTML

<sp-slider id="midtoneSlider" min="0" max="100" value="100"></sp-slider>

用户体验

document.getElementById("midtoneSlider").addEventListener("input", //not sure how to get the current value);


async function setMidtoneOpacity() {
   var sliderValue = //get value of slider
   const result = await customFunction1(sliderValue);
}

async function customFunction1(layerOpacity) {
   const result = await batchPlay(
   [
      {
         "_obj": "select",
         "_target": [
            {
               "_ref": "layer",
               "_name": "MidtoneColour"
            }
         ],

      },
      {
         "_obj": "set",
         "_target": [
            {
               "_ref": "layer",
               "_enum": "ordinal",
               "_value": "targetEnum"
            }
         ],
         "to": {
            "_obj": "layer",
            "opacity": {
               "_unit": "percentUnit",
               "_value": layerOpacity
            }
         },
         "_isCommand": true,
         "_options": {
            "dialogOptions": "dontDisplay"
         }
      }
   ],{
      "synchronousExecution": false,
      "modalBehavior": "fail"
   });
   }

下面有代码，但我不知道如何实现它。

document.querySelector(".yourSlider").addEventListener("input", evt => {
    console.log(`New value: ${evt.target.value}`);
})

或在频谱文档中

const slider = document.querySelector('sp-slider');

const endListener = ({ target }) => {
    target.addEventListener('input', startListener);
    target.removeEventListener('input', streamListener);
    target.removeEventListener('change', endListener);
    console.log(target.value);
};

const streamListener = ({ target }) => {
    console.log(target.value);
};

const startListener = ({ target }) => {
    target.removeEventListener('input', startListener);
    target.addEventListener('input', streamListener);
    target.addEventListener('change', endListener);
    console.log(target.value);
};

slider.addEventListener('input', startListener);

标签： javascriptphotoshopspectrumjs

解决方案

我发现您需要使用 document.querySelector("#//your slider id").value 来调用滑块。然后将侦听器从“输入”更改为“更改”

我正常工作的代码是

document.getElementById("midtoneSlider").addEventListener("change", setMidtoneOpacity);


async function setMidtoneOpacity() {
   var sliderValue = document.querySelector("#midtoneSlider").value
   const result = await customFunction1(sliderValue);
}

async function customFunction1(layerOpacity) {
   const result = await batchPlay(
   [
      {
         "_obj": "select",
         "_target": [
            {
               "_ref": "layer",
               "_name": "MidtoneColour"
            }
         ],

      },
      {
         "_obj": "set",
         "_target": [
            {
               "_ref": "layer",
               "_enum": "ordinal",
               "_value": "targetEnum"
            }
         ],
         "to": {
            "_obj": "layer",
            "opacity": {
               "_unit": "percentUnit",
               "_value": layerOpacity
            }
         },
         "_isCommand": true,
         "_options": {
            "dialogOptions": "dontDisplay"
         }
      }
   ],{
      "synchronousExecution": false,
      "modalBehavior": "fail"
   });
   }

推荐阅读