カラースポイト

動作見本

タッチデバイスでは正確に動作しません。マウスデバイス専用です。

（追記）

タッチデバイス専用版ができました。

usidesu.hatenablog.com

※参考：グローバルjavaスクリプトの内容（タッチデバイス非対応版）

var canvas;
if(document.getElementsByClassName("EuclidianPanel")[0]==undefined){
var canvas = document.getElementsByClassName("GeoGebraFrame")[0].firstChild.firstChild;
}
else{
var canvas = document.getElementsByClassName("EuclidianPanel")[0].firstChild;
}

var containerWidth;
var containerHeight;
if(document.getElementsByClassName("applet_container")[0]==undefined){
var containerWidth = canvas.offsetWidth;
var containerHeight = canvas.offsetHeight;
}
else{
var containerWidth = document.getElementsByClassName("applet_container")[0].offsetWidth;
var containerHeight = document.getElementsByClassName("applet_container")[0].offsetHeight;
}

var frameWidth = ggbApplet.getValue("frameWidth");
var frameHeight = ggbApplet.getValue("frameHeight");

var widthRatio = containerWidth / frameWidth;
var heightRatio = containerHeight / frameHeight

function ggbOnInit() {
console.log("EuclidianPanelは"+document.getElementsByClassName("EuclidianPanel")[0]+"です。");
console.log("applet_containerは"+document.getElementsByClassName("applet_container")[0]+"です。");
console.log("変数canvasの値は、"+canvas+"です。");
console.log("変数containerWidth / frameWidthの値は、"+containerWidth+" / "+frameWidth+"です。比率"+widthRatio);
console.log("変数containerHeight / frameHeightの値は、"+containerHeight+" / "+frameHeight+"です。比率"+heightRatio);
}

function Spuit(){
var spuitx = ggbApplet.getValue("spuitx");
var spuity = ggbApplet.getValue("spuity");
var context = canvas.getContext("2d");
var spuitImage = context.getImageData(spuitx*widthRatio, spuity*heightRatio, 1, 1);
var r = spuitImage.data[0];
var g = spuitImage.data[1];
var b = spuitImage.data[2];
ggbApplet.setValue("r",r);
ggbApplet.setValue("g",g);
ggbApplet.setValue("b",b);
}

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

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

参考：「グローバル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);
}

グラデーション三角形_Javascript版

ついに、GeoGebra上の三角形をグラデーションで塗りつぶすことに成功しました。

今までも挑戦してきましたが、塗るまでに時間がかかったり、線分を大量に生成するという力技しかできませんでした。今回は、Javascriptのグラデーション生成機能を用いて、自動的に描画するので、綺麗かつ速いです。

タッチデバイス対応版はこちら

usidesu.hatenablog.com