5
Bir iOS mobil için HTML5 Canvas renk tekerleği ile bir dokunma olayı yapmaya çalışıyorum, ancak işe yaramıyor. Ben touch move
için mousemove
olay değişti http://www.script-tutorials.com/html5-color-picker-canvas/HTML5 Canvas renk tekerine nasıl dokunma olayı eklenir?
ama bu çalışmıyor:
Ben kodunu kullanır. Neyi yanlış yapıyorum?
/**
*
* HTML5 Color Picker
*
* Licensed under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* Copyright 2012, Script Tutorials
* http://www.script-tutorials.com/
*/
$(function(){
var bCanPreview = true; // can preview
// create canvas and context objects
var canvas = document.getElementById('picker');
var ctx = canvas.getContext('2d');
// drawing active image
var image = new Image();
image.onload = function() {
ctx.drawImage(image, 0, 0, image.width, image.height); // draw the image on the canvas
}
// select desired colorwheel
var imageSrc = 'images/colorwheel1.png';
image.src = imageSrc;
$('#picker').touchmove(function(event) { // mouse move handler
event.preventDefault();
var touch = event.originalEvent.changedTouches[0];
if (bCanPreview) {
// get coordinates of current position
var canvasOffset = $(canvas).offset();
var canvasX = Math.floor(touch.pageX - canvasOffset.left);
var canvasY = Math.floor(touch.pageY - canvasOffset.top);
// get current pixel
var imageData = ctx.getImageData(canvasX, canvasY, 1, 1);
var pixel = imageData.data;
// update preview color
var pixelColor = "rgb("+pixel[0]+", "+pixel[1]+", "+pixel[2]+")";
$('.preview').css('backgroundColor', pixelColor);
// update controls
$('#rVal').val(pixel[0]);
$('#gVal').val(pixel[1]);
$('#bVal').val(pixel[2]);
$('#rgbVal').val(pixel[0]+','+pixel[1]+','+pixel[2]);
var dColor = pixel[2] + 256 * pixel[1] + 65536 * pixel[0];
$('#hexVal').val('#' + ('0000' + dColor.toString(16)).substr(-6));
}
});
$('#picker').click(function(e) { // click event handler
bCanPreview = !bCanPreview;
});
$('.preview').click(function(e) { // preview click
$('.colorpicker').fadeToggle("slow", "linear");
bCanPreview = true;
});
});
HTML5 renk çarkı işaretleme:
<div class="container">
<!-- preview element -->
<div class="preview"></div>
<!-- colorpicker element -->
<div class="colorpicker">
<canvas id="picker" var="1" width="300" height="300"></canvas>
<div class="controls" style="display: none;">
<div><label>R</label> <input type="text" id="rVal" /></div>
<div><label>G</label> <input type="text" id="gVal" /></div>
<div><label>B</label> <input type="text" id="bVal" /></div>
<div><label>RGB</label> <input type="text" id="rgbVal" /></div>
</div>
</div>
</div>
Teşekkür ederim, sadece renk tekerleğinde temas ettikten sonra renk değişmez. Ne olabileceğini biliyor musun? – Caspert
'var touch = event.originalEvent.changedTouches [0];' bir değeri var mı? Herhangi bir hatayla karşılaşıyor musunuz? – Cerbrus
Cep telefonumda hata görmeyeceğim, ancak mobil cihazınızda gördüklerinizin öğelerini incelemek için Chrome geliştirici aracında bir işlev olduğunu düşündüm. – Caspert