介绍

仅在团队内部进行定制和共享是不够的“输出”。像 Hazime 风格一样，我会意识到未来的输出。

你做了什么

这次，我创建了一个带有kintone自定义的“任务决策轮盘应用程序”。

作为创作背景，我目前所在团队的任务决定就是这个神App””，我下定决心要赌小鸡了。轮盘赌会让您在每项任务中都感到兴奋。我们的团队对轮盘赌如此着迷，以至于让我们说：“你想今天决定吗？”

决定一天的任务后，“岩君，你能用kintone试试这个吗？”

这是此轮盘赌定制的触发器。

这将是一个很长的故事，所以让我们立即向您展示一个演示。

演示

开发需要什么 金 轮盘赌应用 js文件 css 文件 库 CDN URL（这次是 Chart.js 和 Chart.js 插件） 评论 钱 应用配置

表格1

字段名称 字段格式 域代码 评论 标题 字符串（1 行） 标题 ex. 下一个土豆罐MC就是你！ ！ ！ ！ - 空间 圆圈 轮盘显示 - 空间 开始按钮 用于开始按钮放置 有趣的按钮 单选按钮 有趣的按钮 选择：开/关有无趣味元素 肌肉轮盘赌 单选按钮 肌肉轮盘赌 让轮盘赌似乎已经决定了一次，然后再次旋转 随机比率 单选按钮 随机比率 随机确定轮盘的划分 桌子 桌子 桌子 （见表2） - 团体 结果 （见表3）

表2

字段名称 字段格式 域代码 评论 添加到轮盘赌 单选按钮 添加单选按钮 选择：开/关是否反映在轮盘赌中 姓名 字符串（1 行） 姓名 添加到轮盘赌的名称

表3

字段名称 字段格式 域代码 评论 决策者 字符串（1 行） 决策者 轮盘赌后的数据保留 比率 字符串（1 行） 比率 轮盘赌后的数据保留 转数 字符串（1 行） 转数 轮盘赌后的数据保留 js和css文件的放置 （空间名称）>（应用名称）>应用设置 在“设置”选项卡中使用 JavaScript/CSS 进行自定义 按以下顺序添加到“PC 的 JavaScript 文件” 轮盘赌.js 将 CSS 文件添加到“PC 的 CSS 文件” 轮盘赌.css

代码注释

有一个轮盘可用作此 kintone 轮盘定制的参考。 ()

参考这个轮盘赌，用kintone实现以下四点。

轮盘赌的名称 显示轮盘赌 轮盘赌 轮盘审判

此外，我们还将解释使赌徒嬉戏的有趣元素。

肌肉轮盘公式 随机比例

然后我会解释。

1. 轮盘名称

首先，我们需要保存一个字符串以添加到轮盘赌中。这次，我将单选按钮和字符串（一行）放在表中，原因如下。

我想轻松选择是否加入轮盘赌 除了人名，还有任务名称等你想在轮盘中转的东西

在此自定义中，考虑到单选按钮的状态，将表中的名称分配给数组。 （这是因为人名需要是数组，后面会解释。）

const inputLables = [];

//テーブルの配列を取得
const tblDataArray = event.record.テーブル.value;  ///event: kintoneイベントによるeventオブジェクト
//ラジオボタンでフィールド変更不可, 名前の配列を取得
Object.keys(tblDataArray).forEach((key) => {
  if (tblDataArray[key].value.ラジオボタン_追加.value === '追加'){
    tblDataArray[key].value.名前.disabled = false;
    if (tblDataArray[key].value.名前.value) {
      inputLabels.push(tblDataArray[key].value.名前.value);   //名前を配列に追加
  } else {
    tblDataArray[key].value.名前.disabled = true;
  }
})

例子：

console.log(inputLabels)   ///['いわくん', 'いわちゃん', 'いわさん']

2.轮盘展示

这是这段时间最重要的部分。

看轮盘赌，“数据一圈一圈，五彩缤纷……不就是饼图吗？？”我想。

搜索：JavaScript饼图→很成功！

因此，轮盘赌决定使用 Chart.js 饼图。

由于这是我第一次使用 Chart.js，我将在下面将其作为备忘录发布。

通过指定 Canvas 标签进行渲染 将标签、背景颜色和饼图百分比放入数组中

//円グラフを作成する関数
const showChart = (element, labels, splitRatio, color) => {
  const myChart = new Chart(element, {
    type: 'pie',
    data: {
      labels: labels,   ///ラベル
      datasets: [{
        backgroundColor: color,   ///背景色
        data: splitRatio,   ///円グラフの割合
        borderColor: '#fff',
        borderWidth: 1
      }]
    },
    options: {
      plugins: {
        tooltip: {
          enabled: false
        },
        //凡例を消す
        legend: {
          labels: {
            fontColor: 'black'
          },
          display: false   ///falseで非表示、デフォでtrue
        },
        datalabels: {
          color: 'black',
          anchor: 'center',
          font: {
            weight: "bold",
            size: 35,
          },
          formatter: (value, element) => {
            let label = element.chart.data.labels[element.dataIndex];
            return label;
          },
        },
      },
      animation: false,   //グラフを表示させたときのアニメーションを消す
    },
    plugins: [
      ChartDataLabels,   //プラグインを使えるようにする
    ]
  });
};

例子：

kintone.events.on('app.record.create.show', (event) => {
  ///canvasタグを生成
  const circleElement = document.createElement('canvas');
  circleElement.id = 'roulette';

  ///関数の引数を定義（今回はデモ用に変数を定義）
  const inputLabels = ['いわくん', 'いわちゃん', 'いわさん'];
  const backgroundColor = ['red', 'orange', 'yellow'];
  const splitRatio = [33.3, 33.3, 33.3];

  ///関数の呼び出し
  showChart(circleElement, inputLabels, splitRatio, backgroundColor);

  ///kintoneへ表示
  kintone.app.record.getSpaceElement('circle').appendChild(circleElement);
})

结果

3.轮盘旋转

我可以写一个轮盘赌。接下来是轮换。

轮盘旋转是我通过使用旋转画布元素来实现这一点

const startRotating = (initialDegree, finalDegree, duration) => {
  return new Promise((resolve) => {
    const keyFrames = new KeyframeEffect(
        document.getElementById('roulette'),   ///作成したルーレットのid
        [
        {transform: `rotate(${initialDegree}deg)`},   ///回転する前の角度（初期値）
        {transform: `rotate(${finalDegree}deg)`}   //回転した後の角度（終値）
        ],
        {
          duration: duration,   ///１つのアニメーションにかかる時間(ミリ秒)
          easing: 'ease-in-out',   ///始めゆっくりで、その後定回転で、終わりゆっくり
          iterations: 1,   ///指定した動作の繰り返し数 ⇄ infinite でずっと
          fill: 'forwards',   ///終わったときにどういう状態で止めるか　(forwardsで終わったときの状態で止める)
        }
      );
    const playAnimation = new Animation(keyFrames);
    playAnimation.play();
    playAnimation.onfinish = () => {resolve()};   ///アニメーションが終わったらresolveを返す
  })
};

生成一个 KeyframeEffect 对象，并基于此生成一个 Animation 对象。首先，关键帧是一个创建动画运动的函数，我将 KeyframeEffect() 解释为生成运动的内容。在关键帧效果中，new KeyframeEffect(動かしたい要素, 動き, オプション)通过指定它来使用它这里的重点如下。

将随机生成的旋转角度替换为自变量的旋转角度。-> 从轮盘的角度来看，旋转的次数和停止的地方需要是随机的 除非使用.play() 播放，否则动画对象不起作用 将动画放入 Promise 对象-> 因为我想做同步处理（我会用肌肉轮盘公式解释）

例子：

///キリが良い回転角にならないように7倍をかけて、10回転 + 0~7回転のランダムな回転角を生成
const revolution = 3600 + 7 * Math.floor( Math.random() * 361);

///上で生成したランダムの回転数でルーレットを回転
startRotating(0, revolution, 8000);

4、轮盘的判断

这是我最用脑子的部分。

轮盘赌的判断标准是它从 0 度（时钟的 12 点钟部分）从 0 度旋转到 360 度。这是因为饼图实际上是从 12 点位置开始增加的，所以初始值永远不会偏移。

由于生成的随机旋转数为3600度或更多，因此执行计算以确定旋转从初始值在0到360度处停止了多少。这可以使用余数。例子：

console.log(3750 % 360)   ///150

接下来，我们需要确定这个角度在哪个人里面。这是使用 Array.reduce() 计算的，用于比较饼图的百分比和旋转角度的大小。

//判定関数
const judgeSelectedLabel = (labelLength, revolution, splitRatioArray) => {
  const remainder = revolution % 360;
  let selectedLabel = 0;
  const splitDegreeArray = [];
  splitRatioArray.forEach((key) => {
      splitDegreeArray.push(key * 360 /100);
  });
  const reversedSplitDegree = splitDegreeArray.reverse();
  reversedSplitDegree.reduce((previousValue, currentValue, currentIndex) => {
      if (previousValue <= remainder && remainder < previousValue + currentValue) {
        selectedLabel = (labelLength - 1) - currentIndex;
      }
      return previousValue + currentValue;
  }, 0);
  return selectedLabel;
};

这里的重点是

顺时针旋转必须以 inputLabels 的相反顺序确定-> 使用 Array.reverse() 反转 不要乱用角度和分数-> 因为图假设了100个分数，但是旋转角度是360度

例子：

const inputLabels = ['いわくん', 'いわちゃん', 'いわさん', 'いわきん'];
const labelLength = inputLabels.length;   ///今回は4
const revolution = 3601;
const splitRatio = [25, 25, 25, 25]

const result = judgeSelectedLabel(labelLength, revolution, splitRatio);
console.log(result);   ///3
console.log(inputLabels[result]);   ///いわきん

现在轮盘的基本动作都OK了！

趣味元素（肌肉轮盘式）

接下来，我将解释让赌徒心动的功能，“肌肉轮盘”。

肌肉轮盘是一种让你认为轮盘已经停止并决定，然后轮盘再次旋转的动作。

关键帧对象选项包括多个但是，由于没有任何动作会撞到肌肉轮盘，

正常转动 在静止的时候有点挑逗 再次开始旋转 打印结果实现。

这就是 Promise 早期的动画发挥作用的地方。 （后来我发现我需要一个 Promise 哈哈）使用 async/await 重复动画，如下所示。

  await startRotating(0, revolution/2, 4000);   /// (revolution÷2) まで4秒で回す
  await startRotating(revolution/2, revolution/2, 500);   ///止まった状態で0.5秒間停止
  await startRotating(revolution/2, revolution, 4000);   /// (revolution÷2) -> revolution まで4秒で回す

如果动画最后没有转到旋转角度，那么可见的结果和判断的结果可能会有所不同，所以我设置它总共旋转一圈。

趣味元素（随机比例）

接下来，我将再次解释让赌徒心痒痒的功能，“随机比率”。这个函数是一个恶魔函数，可以随机改变饼图的比例，甚至随机化获胜的概率。

当除以人数时，变化率基于角度在±50％的范围内变化。随机比率的细节在下面解释。

假设 360° 为 100%，N = 人数，(-0.5 <= σ <= 0.5)，轮盘赌均分为 (100 / N) * N 或 {(100 / N) * 除以 σ } * N 在 (-0.5 <= σ <= 0.5) 到第 [N-1] 个范围内生成随机数，并通过 (100 / N) * σ 确定比率 对于第 N 个，计算直到第 N 个的比率之和，-0.5 * (100 / N) <= 100 - SUM(1 ~ (N-1)) <= 0.5 * (100 / N) 如果在范围内，第N个比例为100 - SUM(1 ~ (N-1)) 否则从第一个开始重复计算，直到在范围内

函数定义

//円の分割の配列を等分割で出力する関数(ランダムレシオのラジオボタンがオフの時には等分割)
const normalSplitRatio = (labelLength) => {
  const ratioArray = [];
  for (let count = 0; count < labelLength; count++) {
      ratioArray.push(100 / labelLength);
  }
  return ratioArray;
};

//円の分割の配列をランダムで出力する関数(100/labelLength の値の ±50% の変動率)
const randomSplitRatio = (labelLength) => {
  const ratioArray = [];
  const calculateRatio = () => {
      for (let count = 0; count < labelLength - 1; count++) {
          const random = Math.floor(Math.random() * 101) -50;
          const variation = (100 + random) / 100;
          const ratio = Math.floor(100 * variation / labelLength);
          ratioArray.push(ratio);
      }
      const sum = ratioArray.reduce((previousValue, currentValue) => previousValue + currentValue, 0)
      ratioArray.push(100 - sum);
  }
  calculateRatio();
  while (ratioArray[labelLength - 1 ] < 0.5 * 100 / labelLength || 1.5 * 100 / labelLength < ratioArray[labelLength - 1]) {
      ratioArray.splice(0);
      calculateRatio();
  }
  return ratioArray;
};

例子：

const inputLabels = ['いわくん', 'いわちゃん', 'いわさん', 'いわきん'];

const splitRatio = randomSplitRatio(inputLabels.length);
console.log(splitRatio);   ///[24, 28, 29, 19]

源代码

我没有解释一切，但如果你对整个事情是如何实现的感到好奇，由 管理，请参考。

外表 添加了轮盘赌声音 体现在任务管理应用中 《Periperi！！其实是这样的》的动画（不知道有没有这样的事情……） 插入 在最后

这是一篇很长的文章，但感谢您的阅读。

定制不只是简化和自动化操作吗？我认为。

你为什么要做这个任务？

让您期待决定任务的“轮盘定制”，如果您能与您的团队一起尝试，我会很高兴。即使你在做同样的事情，仅仅拥有一个有趣的氛围也可以创造良好的团队合作。

原创声明：本文系作者授权爱码网发表，未经许可，不得转载;

原文地址：https://www.likecs.com/show-308631563.html