Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

Вернуться   Форум программистов > Web > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Ответ
 
Опции темы
Старый 15.12.2018, 17:47   #1
lastDaos
Новичок
Джуниор
 
Регистрация: 02.12.2018
Сообщений: 29
Репутация: -3
По умолчанию Странное поведение Canvas

Рисуя цветовую карту (для выбора цвета) на canvas. При первой отрисовке методом draw() получаю карту, при перерисовке на mousemove() градиент чёрного меняется становясь более насыщенным. Чем вызвано такое поведение?

Весь листинг прототипа
Код:

<template>
  <div class="b_colorpicker">
  
  	
	<canvas class="e_colormap"		ref="ColorMap"				@mousedown="mousedownColorMap"></canvas>
  
  
  </div>
</template>

<script>
  export default {
  	name: 'BasicColorPicker',
  	
    data () {
      return {

      	color:{
      		rgb:{

      		},
      		hls:{

      		}
      	},
      	mainColorRGB: {
      		r: 255,
      		g: 0,
      		b: 0
      	},
      	mainColor:'rgb(255,0,0)',
      	ColorSaturation:{
      		ctx: null,
      		width: null,
      		height: null
      	},
      	ColorMap:{
      		ctx: null,
      		width: null,
      		height: null
      	},
      	ColorTape: {
      		ctx: null,
      		width: null,
      		height: null
      	},
      	pointer:{
      		x: null,
      		y: null,
      		pickCoords: null,
      	},
        
      }
    },

    
    methods: {
    	
    	// Initialize ColorPicker Default Width & Height
    	initColorPicker(){
    		// get width & heigth parent container
    		
    		this.$refs['ColorMap'].width = this.$refs['ColorMap'].clientWidth
    		this.$refs['ColorMap'].height = this.$refs['ColorMap'].width
			console.log(this.$refs)
    	},



    	
    	paintCursorPicker(x,y){
    		var ctx = this.ColorMap.ctx;
    		ctx.globalCompositeOperation = "difference";
		    ctx.fillStyle = 'rgb(125,125,125)';
		    ctx.fillRect(x,y-8,1,8); 
			ctx.fillRect(x-8,y,8,1); 
			ctx.fillRect(x,y+1,1,8);
			ctx.fillRect(x+1,y,8,1);
		    ctx.globalCompositeOperation = "normal";

	   	},





    	/*
			MOUSE EVENTS FOR COLOR TAPE
    	*/
    	
    	/*
			END MOUSE EVENTS FOR COLOR TAPE
    	*/


    	/*
			MOUSE EVENTS FOR COLOR MAP
    	*/
	   	mousedownColorMap(e){
	   		

	   		this.$refs['ColorMap'].style.cursor = 'none'
	   		this.mousemoveColorMap(e)
	   		window.addEventListener('mousemove', this.mousemoveColorMap)
	   		window.addEventListener('mouseup', this.mouseupColorMap)
	   	},
	   	mousemoveColorMap(e){
	   		
    		
	   		this.$refs['ColorMap'].offsetLeft
	   		var x = e.pageX 
	   		var y = e.pageY 
	   		var newX = 0;
	   		var newY = 0;
	   		
	   		
	   			newX = x - this.$refs['ColorMap'].offsetLeft
	   			if(newX < 0) {
	   				newX = 0
	   			}else if(newX > this.ColorMap.width){
	   				newX = this.ColorMap.width -1
	   			}

	   			newY = y - this.$refs['ColorMap'].offsetTop
	   			if(newY < 0){
	   				newY = 0
	   			}else if(newY > this.ColorMap.height){
	   				newY  = this.ColorMap.height
	   			}
	   			
	   		this.draw()
	   		var p = this.ColorMap.ctx.getImageData(newX, newY, 1, 1).data;
	   		var tempColor = {
	   			r: p[0],
	   			g: p[1],
	   			b: p[2]
	   		}
	   		this.mainColorRGB = tempColor;

	   		this.paintCursorPicker(newX, newY)  

	   		this.$emit('color', this.mainColorRGB)
	   		
	   		
	   	},
	   	mouseupColorMap(e){
	   		this.$refs['ColorMap'].style.cursor = 'default'
	   		var x = e.pageX - this.$refs['ColorMap'].offsetLeft;
	   		var y = e.pageY - this.$refs['ColorMap'].offsetTop
	   		var p = this.ColorMap.ctx.getImageData(x, y, 1, 1).data;
	   		
	   		this.draw()

	   		window.removeEventListener('mousemove', this.mousemoveColorMap)
	   		window.removeEventListener('mouseup',this.mouseupColorMap)
	   	},

	   	/*
			END MOUSE EVENTS FOR COLOR MAP
    	*/

    	
	   	

    	initContexts(){
    		this.ColorMap.ctx = this.$refs['ColorMap'].getContext("2d");
    		this.ColorMap.width = this.$refs['ColorMap'].width;
    		this.ColorMap.height = this.$refs['ColorMap'].height;

    		
    	},
    	defaultColorMap(){
    		let ctx;
    		let width;
    		let height;
    		let whiteGradient;
    		let blackGradient;
    		let mainColor;


    		mainColor = this.mainColor;
    		ctx = this.ColorMap.ctx;
    		width = this.ColorMap.width;
    		height = this.ColorMap.height;

    		// white gradient
			whiteGradient = ctx.createLinearGradient(0, height / 2, width, height / 2);
			whiteGradient.addColorStop(0.005,"rgba(255,255,255,1)");
			whiteGradient.addColorStop(0.99,"rgba(255,255,255,0)");

			// black gradient
			blackGradient = ctx.createLinearGradient(width / 2, height, width / 2, 0);
			blackGradient.addColorStop(0.005,"rgba(0,0,0,1)");
			blackGradient.addColorStop(0.99,"rgba(0,0,0,0)");


			
		    ctx.fillStyle = mainColor;
		    ctx.fillRect(0,0,width,height);

		   	ctx.fillStyle = whiteGradient;
		   	ctx.fillRect(0,0,width ,height);

		   	ctx.fillStyle = blackGradient;
		   	ctx.fillRect(0,0,width,height);
	   
    	},
    	
    	
    	draw(){
    	
    	this.defaultColorMap();

    	
    	}
      
    },
    mounted(){
    	this.initColorPicker()
    	this.initContexts();
    	this.draw()

    
    	
    }
  }
</script>

Изображения
Тип файла: png first_colormap.png (28.4 Кб, 10 просмотров)
Тип файла: png second-colormap.png (25.5 Кб, 10 просмотров)
lastDaos вне форума   Ответить с цитированием
Старый 15.12.2018, 17:49   #2
lastDaos
Новичок
Джуниор
 
Регистрация: 02.12.2018
Сообщений: 29
Репутация: -3
По умолчанию

Вот так можно увидеть разницу

Последний раз редактировалось lastDaos; 15.12.2018 в 17:56.
lastDaos вне форума   Ответить с цитированием
Старый 16.12.2018, 12:19   #3
Naive
Раздолбайских Дел
Профессионал
 
Аватар для Naive
 
Регистрация: 22.05.2009
Адрес: Екатеринбург
Сообщений: 3,761
Репутация: 2322
По умолчанию

Полупрозрачные пиксели накладываются. Стирай холст перед новой отрисовкой.
__________________
Работаю. В этот раз за деньги.
Жду ваши искренние спасибы на яндекс-кошелек: 410011068154587
Naive вне форума   Ответить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Странное поведение QDialog zvb Qt и кроссплатформенное программирование С/С++ 3 20.09.2017 08:10
Странное поведение диска С DRAgon™ Железо 20 12.03.2011 23:59
Странное поведение BASM Sibedir Общие вопросы Delphi 8 31.01.2011 13:02
Странное поведение gets alex_alpha Общие вопросы C/C++ 3 27.03.2010 19:21
Странное поведение базы yulia БД в Delphi 7 22.04.2009 07:15


01:23.


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.

RusProfile.ru


Справочник российских юридических лиц и организаций.
Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru