Dibujo línea transparente en lienzo de imageview en android
El problema es, intento cambiar la opacidad a 100 que debe ser transparente, pero cuando trato de dibujar la línea tiene algún círculo en la línea. (Ref a la captura de pantalla) Muy apreciar si proporcionan algún código de ejemplo. Muchas gracias por ayudar.
Código de MainActivity
// set image bitmap = downScale(view.getTag().toString(),1280,1024); altered_bitmap = Bitmap.createBitmap(bitmap.getWidth(),bitmap.getHeight(), bitmap.getConfig()); draw_view.setNewImage(altered_bitmap,bitmap); pen.setOnClickListener(new OnClickListener(){ @Override public void onClick(View arg0) { draw_view.setAlpha(100); } } }); Y código de la imagen personalizada
public ScaleImageView(Context context) { super(context); sharedConstructing(context); } public void sharedConstructing(Context context) { super.setClickable(true); this.context = context; mScaleDetector = new ScaleGestureDetector(context, new ScaleListener()); matrix = new Matrix(); m = new float[9]; setImageMatrix(matrix); setScaleType(ScaleType.MATRIX); paint = new Paint(); paint.setAntiAlias(true); paint.setStrokeWidth(width); paint.setColor(color); paint.setStyle(Paint.Style.STROKE); paint.setStrokeJoin(Paint.Join.ROUND); paint.setStrokeCap(Paint.Cap.ROUND); paint.setAlpha(alpha); drawListener = new OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { if (getDrawable() != null) { int action = event.getAction(); switch (action) { case MotionEvent.ACTION_DOWN: downx = getPointerCoords(event)[0];// event.getX(); downy = getPointerCoords(event)[1];// event.getY(); break; case MotionEvent.ACTION_MOVE: upx = getPointerCoords(event)[0];// event.getX(); upy = getPointerCoords(event)[1];// event.getY(); canvas.drawLine(downx, downy, upx, upy, paint); mPath = new Path(); paths.add(mPath); invalidate(); downx = upx; downy = upy; break; case MotionEvent.ACTION_UP: upx = getPointerCoords(event)[0];// event.getX(); upy = getPointerCoords(event)[1];// event.getY(); canvas.drawLine(downx, downy, upx, upy, paint); mPath = new Path(); paths.add(mPath); invalidate(); break; case MotionEvent.ACTION_CANCEL: break; default: break; } } return true; } }; setOnTouchListener(drawListener); } //draw view start public void setNewImage(Bitmap alteredBitmap, Bitmap bmp) { canvas = new Canvas(alteredBitmap); matrix_draw = new Matrix(); canvas.drawBitmap(bmp, matrix_draw, paint); setImageBitmap(alteredBitmap); mPath = new Path(); paths.add(mPath); } public void setBrushColor(int color) { this.color = color; paint.setColor(color); paint.setAlpha(alpha); } public void setAlpha(int alpha) { this.alpha = alpha; paint.setAlpha(alpha); } public void setWidth(float width) { this.width = width; paint.setStrokeWidth(width); } final float[] getPointerCoords(MotionEvent e) { final int index = e.getActionIndex(); final float[] coords = new float[] { e.getX(index), e.getY(index) }; Matrix matrix = new Matrix(); getImageMatrix().invert(matrix); matrix.postTranslate(getScrollX(), getScrollY()); matrix.mapPoints(coords); return coords; } public void setIsScale() { isScale = !isScale; setOnTouchListener(isScale ? zoomListener : drawListener); }
Y la captura de pantalla
Actualización: Código del proyecto
Dado que es bastante difícil de averiguar el problema, aunque extracto de código, tengo uplod el proyecto (<1 mb) junto con la biblioteca utilizada:
Si tiene algún tiempo libre, le invitamos a echar un vistazo es una pequeña herramienta de dibujo, primero copie una carpeta con algunas imágenes a la carpeta "HistoryTool" en su dispositivo
El camino, por ejemplo, como:
sd card root/ HistoryTool/ folder1 / a.jpg
, Entonces usted puede dibujar en él, pero la línea transparente del drenaje tiene círculo en él. eso es todo
Https://drive.google.com/file/d/0B9mELZtUJp0LZncwQVM4alExalE/view?usp=sharing
Por lo tanto, su problema es círculos en la línea. Esto viene de cada nuevo segmento de la cadena de línea que se dibuja individualmente y cada punto final se superponen al segmento previamente trazado de la cadena. Desea dibujar la ruta de la línea antes de llamar a stroke(); Esto dibujará la cadena entera de segmentos de línea una vez en lugar de individualmente y evitará los solapamientos circulares.
Lo que podría hacer es algo como esto: Haga una línea de cadena de clase que dibuja líneas de una vez:
/* Feed the line chain an array of points to draw when you construct it. */ /* points_=[{"x":0,"y":0},{"x":10,"y":10}]; */ function LineChain(points_){ this.points=points_; } LineChain.prototype={ constructor:LineChain, /* Draws this line chain to the specified context. */ drawTo:function(context_){ /* Get the first point in the chain. */ var point=this.points[0]; /* Start the path by moving to the first position on the chain. */ context_.beginPath(); context_.moveTo(point.x,point.y); /* Loop through the remaining points in the chain and draw the rest of the path. */ for (var index=1;index<this.points.length-1;index++){ point=this.points[index]; context_.lineTo(point.x,point.y); } } }
Ahora, cuando realmente desea dibujar la cadena en el lienzo, simplemente haga esto:
/* Define a line chain. */ var line_chain=new LineChain([{"x":0,"y":0},{"x":10,"y":20},{"x":30,"y":40}]); /* Wherever you're drawing at... */ context.strokeStyle="rgba(255,0,0,0.5)"; context.lineWidth=20; line_chain.drawTo(context); context.stroke();
Básicamente, no importa cómo se vaya implementando esta técnica, lo único que debe hacer es asegurarse de que todo el camino se dibuja antes de llamar a la función de stroke .
De los documentos Paint.setAlpha (int)
Ajuste el componente alfa [0..255] del color de la pintura.
Esto significa que 0 es transparente y 255 es completamente opaco. 100 usted está fijando a algo en el medio.
He completado la tarea mediante el uso de On-draw y Path
drawListener = new OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { if (getDrawable() != null) { int action = event.getAction(); switch (action) { case MotionEvent.ACTION_DOWN: downx = getPointerCoords(event)[0];// event.getX(); downy = getPointerCoords(event)[1];// event.getY(); holderList.add(new Holder(color, width, alpha)); holderList.get(holderList.size() - 1).path.moveTo(downx, downy); break; case MotionEvent.ACTION_MOVE: upx = getPointerCoords(event)[0];// event.getX(); upy = getPointerCoords(event)[1];// event.getY(); holderList.get(holderList.size() - 1).path.lineTo(upx, upy); invalidate(); downx = upx; downy = upy; break; case MotionEvent.ACTION_UP: break; case MotionEvent.ACTION_CANCEL: break; default: break; } } return true; } }; setOnTouchListener(drawListener); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if (img != null) { tmp_canvas.drawBitmap(img, 0, 0, null); } for (Holder holder : holderList) { tmp_canvas.drawPath(holder.path, holder.paint); } } //draw view start public void setNewImage(Bitmap alteredBitmap, Bitmap bmp) { tmp_canvas = new Canvas(alteredBitmap); img = bmp; tmp_canvas.drawBitmap(bmp, 0, 0, null); setImageBitmap(alteredBitmap); }