KineticJS如何从图层中获取颜色(从图层中选取颜色)
KineticJS How to get color from layer (Color picker from layer)
我有两个脚本。
首先是从图像中获取颜色:http://www.html5canvastutorials.com/labs/html5-canvas-color-picker/
<canvas id="myCanvas" width="578" height="276"></canvas>
<script>
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
function drawColorSquare(canvas, color, imageObj) {
var colorSquareSize = 100;
var padding = 10;
var context = canvas.getContext('2d');
var squareX = (canvas.width - colorSquareSize + imageObj.width) / 2;
var squareY = (canvas.height - colorSquareSize) / 2;
context.beginPath();
context.fillStyle = color;
context.fillRect(squareX, squareY, colorSquareSize, colorSquareSize);
context.strokeRect(squareX, squareY, colorSquareSize, colorSquareSize);
}
function init(imageObj) {
var padding = 10;
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var mouseDown = false;
context.strokeStyle = '#444';
context.lineWidth = 2;
canvas.addEventListener('mousedown', function() {
mouseDown = true;
}, false);
canvas.addEventListener('mouseup', function() {
mouseDown = false;
}, false);
canvas.addEventListener('mousemove', function(evt) {
var mousePos = getMousePos(canvas, evt);
var color = undefined;
if(mouseDown && mousePos !== null && mousePos.x > padding && mousePos.x < padding + imageObj.width && mousePos.y > padding && mousePos.y < padding + imageObj.height) {
// color picker image is 256x256 and is offset by 10px
// from top and bottom
var imageData = context.getImageData(padding, padding, imageObj.width, imageObj.width);
var data = imageData.data;
var x = mousePos.x - padding;
var y = mousePos.y - padding;
var red = data[((imageObj.width * y) + x) * 4];
var green = data[((imageObj.width * y) + x) * 4 + 1];
var blue = data[((imageObj.width * y) + x) * 4 + 2];
var color = 'rgb(' + red + ',' + green + ',' + blue + ')';
drawColorSquare(canvas, color, imageObj);
}
}, false);
context.drawImage(imageObj, padding, padding);
drawColorSquare(canvas, 'white', imageObj);
}
var imageObj = new Image();
imageObj.onload = function() {
init(this);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/color-picker.png';
</script>
第二个是获取按压的图层:http://jsfiddle.net/rws05qdr/
<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.3.min.js"></script>
<script defer="defer">
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer({id:1});
var imageObj = new Image();
imageObj.onload = function() {
var yoda = new Kinetic.Image({
x: 140,
y: stage.getHeight() / 2 - 59,
image: imageObj,
width: 106,
height: 118
});
layer.add(yoda);
stage.add(layer);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';
var layer2 = new Kinetic.Layer({id:2});
var imageObj2 = new Image();
imageObj2.onload = function() {
var filteredYoda = new Kinetic.Image({
x: 280,
y: stage.getHeight() / 2 - 59,
image: imageObj2,
width: 106,
height: 118
});
layer2.add(filteredYoda);
stage.add(layer2);
};
imageObj2.src = 'http://demo-stable-ofbiz.apache.org/images/products/GZ-1000/small.png';
stage.on('click', function(e) {
if(e.targetNode.parent.attrs.id == 1){
alert('first layer');
} else {
alert('second layer');
}
});
</script>
我如何获得图层按压的结果并获得此图层颜色
getImageData(x,y,width,height)
可以从画布导出像素数据,但您使用的是"其他域"图像http://www.html5canvastutorials.com/demos/assets/yoda.jpg
和http://demo-stable-ofbiz.apache.org/images/products/GZ-1000/small.png
。它会污染画布,并且受污染的画布无法导出。
您应该使用具有相同域的图像或将您的图像发布到支持跨域共享的网站。
一旦解决了跨域问题,就可以使用getImageData
方法。它是上下文方法,每一层都有自己的上下文。
从layer.getCanvas().getContext();
层获取上下文,并从上下文中获取鼠标位置的像素数据。
stage.on('click', function(e) {
var x = e.pageX - $(e.target).offset().left; // mouse position - canvas offset
var y = e.pageY - $(e.target).offset().top;
var ctx = e.targetNode.parent.getCanvas().getContext(); // get context from layer
var rgb = ctx.getImageData(x, y, 1, 1).data; // get pixel data from the context
});
这是jsfiddle:http://jsfiddle.net/rws05qdr/7/
相关文章:
- 更改图层中单个矢量特征的图标
- Chart.js条形图:网格颜色和隐藏标签
- 谷歌地图热图图层点半径
- 谷歌地图-更改图层图标大小
- 如何通过ID获取图层对象
- 如何使用chartjs设置条形图中每个条形图的颜色
- CS5隐藏图层的速度非常慢
- 开放图层导出为 KML 并保留我的地图样式
- 传单问题:使折线的图层组不可单击
- 将图层添加到另一个图层
- 3d图层滑块Wordpress插件:编辑3d颜色
- OL3:如何获取矢量图层的现有样式属性(例如填充颜色、描边颜色等)
- 如何在 Photoshop 填充图层中检索颜色
- 通过 loadURL 函数加载标记图层时更改地图框中的标记颜色
- 如何填充谷歌地图数据图层的颜色
- 更改开放图层中 ol.geom.LineString 的颜色 3.
- KineticJS如何从图层中获取颜色(从图层中选取颜色)
- Openlayers 2.12 JSON图层颜色与TURF算法
- 如何从Openlayers 3图层中获取像素的颜色值
- Javascript Photoshop:用于更改现有文本图层的文本颜色的语法