Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

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

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

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 15.12.2018, 16:47   #1
lastDaos
Новичок
Джуниор
 
Регистрация: 02.12.2018
Сообщений: 29
По умолчанию Странное поведение 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 Кб, 35 просмотров)
Тип файла: png second-colormap.png (25.5 Кб, 37 просмотров)
lastDaos вне форума Ответить с цитированием
Старый 15.12.2018, 16:49   #2
lastDaos
Новичок
Джуниор
 
Регистрация: 02.12.2018
Сообщений: 29
По умолчанию

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

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

Полупрозрачные пиксели накладываются. Стирай холст перед новой отрисовкой.
Alar, верни репу!
Naive вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


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