グラデーション三角形_タッチデバイス対応版

タッチデバイスにも対応しました。

参考：「グローバルJavaスクリプト」に記載したスクリプト

※これを単にコピペしただけでは、上記は実現できません。あくまで参考用です。

var appletWidth = ggbApplet.getValue("width");
var appletHeight = ggbApplet.getValue("height");

function Listener(event){
document.getElementsByClassName("EuclidianPanel")[0].firstChild.addEventListener(event, Executor);
document.getElementsByClassName("GeoGebraFrame")[0].firstChild.addEventListener(event, Executor);
window.addEventListener(event, Executor);
}

function ggbOnInit() {
ggbApplet.setSize(appletWidth,appletHeight);
Executor();
var move = window.ontouchstart===null?"touchmove":"mousemove";
Listener(move);
var clk = window.ontouchstart===null?"touchstart":"click";
Listener(clk);
}


function Checker(){
var fitter = document.getElementsByClassName("EuclidianPanel")[0].firstChild;
return fitter;
}

var count;

function Executor(){
count = 0;
var ID = setInterval(
function Drawer(){
count++;
var canvas = Checker();
if(canvas != undefined){
var x1 = ggbApplet.getValue("x1");
var y1 = ggbApplet.getValue("y1");
var x2 = ggbApplet.getValue("x2");
var y2 = ggbApplet.getValue("y2");
var x3 = ggbApplet.getValue("x3");
var y3 = ggbApplet.getValue("y3");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.lineTo(x3, y3);
context.closePath();
var gradient = context.createLinearGradient(Math.min(x1, x2, x3), Math.min(y1, y2, y3),Math.max(x1, x2, x3),Math.min(y1, y2, y3));
gradient.addColorStop(0/7, "#ff0000");
gradient.addColorStop(1/7, "#ffbf00");
gradient.addColorStop(2/7, "#80ff00");
gradient.addColorStop(3/7, "#00ff40");
gradient.addColorStop(4/7, "#00ffff");
gradient.addColorStop(5/7, "#0040ff");
gradient.addColorStop(6/7, "#8000ff");
gradient.addColorStop(7/7, "#ff00bf");
context.fillStyle = gradient;
context.fill();
}
if(count > 100){
clearInterval(ID);
}
},1);
}